feat: improved ux for filepath display

packages/bruno-app/src/components/Modal/index.js

@@ -16,7 +16,7 @@ const ModalHeader = ({ title, handleCancel, customHeader, hideClose }) => (
   </div>
 );
 
-const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-6">{children}</div>;
+const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-4">{children}</div>;
 
 const ModalFooter = ({
   confirmText,

packages/bruno-app/src/components/PathDisplay/StyledWrapper.js

@@ -5,16 +5,32 @@ const StyledWrapper = styled.div`
     background: ${(props) => props.theme.requestTabPanel.url.bg};
     border-radius: 4px;
     padding: 8px 12px;
-
-    .filename {
-      color: ${(props) => props.theme.brand};
-      font-weight: 500;
-      min-height: 1.25rem;
+    font-size: 0.8125rem;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    
+    .icon-column {
+      padding-right: 8px;
+      align-items: flex-start;
+      padding-top: 2px;
     }
 
-    .file-extension {
+    .path-container {
+      flex-wrap: wrap;
+    }
+
+    .path-segment {
+      white-space: nowrap;
+    }
+
+    
+    .filename, .file-extension {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+
+    .separator {
       color: ${(props) => props.theme.text};
-      opacity: 0.5;
+      opacity: 0.6;
+      margin: 0 1px;
     }
   }
 `;

packages/bruno-app/src/components/PathDisplay/index.js

@@ -19,7 +19,7 @@ const PathDisplay = ({
     <StyledWrapper>
       <div className="mt-4">
         <div className="flex items-center justify-between mb-2">
-          <label className="block font-semibold">Location Path</label>
+          <label className="block font-medium">Location</label>
           <IconEdit 
             className="cursor-pointer opacity-50 hover:opacity-80" 
             size={16} 
@@ -28,19 +28,28 @@ const PathDisplay = ({
           />
         </div>
         <div className="path-display">
-          <div className="flex flex-wrap items-center gap-1 text-sm">
-            <div className="flex items-center gap-1">
-              {showExtension ? <IconFile size={16} className="text-gray-500" /> : <IconFolder size={16} className="text-gray-500" />} 
-              <span className="font-medium">{collection?.name}</span>
+          <div className="path-layout flex">
+            <div className="icon-column flex">
+              {showExtension ? <IconFile size={16} /> : <IconFolder size={16} />}
             </div>
-            {pathSegments?.length > 0 && pathSegments?.map((segment, index) => (
-              <div key={index} className="flex items-center gap-1">
-                <span className="text-gray-400">/</span>
-                <span>{segment}</span>
+            <div className="path-container flex font-mono items-center">
+              <div className="path-segment collection-segment">
+                {collection?.name}
               </div>
-            ))}
-            <div className="flex items-center gap-1">
-              {collection && <span className="text-gray-400">/</span>}
+              
+              {pathSegments?.length > 0 && pathSegments?.map((segment, index) => (
+                <React.Fragment key={index}>
+                  <span className="separator">/</span>
+                  <div className="path-segment">
+                    {segment}
+                  </div>
+                </React.Fragment>
+              ))}
+              
+              {collection && (
+                <span className="separator">/</span>
+              )}
+              
               <span className="filename">
                 {filename}
                 {showExtension && filename?.length ? (