Merge pull request #1448 from internxt/fix/PB-3723-size-menu-issues

Improve resposive desing for small sizes
internxt · Feb 11, 2025 · f7a4120 · f7a4120
2 parents 56774a0 + 262b79d
commit f7a4120
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 7 deletions.
diff --git a/src/app/drive/components/DriveExplorer/DriveExplorer.tsx b/src/app/drive/components/DriveExplorer/DriveExplorer.tsx
@@ -677,8 +677,10 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
           />
         )}
         <div className="flex w-1 grow flex-col">
-          <div className="z-10 flex h-14 max-w-full shrink-0 justify-between px-5">
-            <div className={`mr-20 flex w-full min-w-0 flex-1 flex-row items-center text-lg ${titleClassName ?? ''}`}>
+          <div className="z-10 flex flex-wrap min-h-14 max-w-full shrink-0 justify-between px-5">
+            <div
+              className={`mr-20 ${isTrash ? 'min-w-0' : 'min-w-[200px]'} flex w-full flex-1 flex-row flex-wrap items-center text-lg ${titleClassName ?? ''}`}
+            >
               {title}
             </div>
             {/* General Dropdown for Drive Explorer/Trash */}

diff --git a/...omponents/DriveExplorer/DriveExplorerItem/DriveExplorerListItem/DriveExplorerListItem.tsx b/...omponents/DriveExplorer/DriveExplorerItem/DriveExplorerListItem/DriveExplorerListItem.tsx
@@ -53,7 +53,7 @@ const DriveExplorerListItem = ({ item }: DriveExplorerItemProps): JSX.Element =>
       }
       data-test={`file-list-${item.isFolder ? 'folder' : 'file'}`}
     >
-      <div className="flex min-w-activity grow items-center pr-3">
+      <div className="flex shrink-0 min-w-activity grow items-center pr-3">
         {/* ICON */}
         <div className="box-content flex items-center pr-4">
           <div className="relative flex h-10 w-10 justify-center drop-shadow-soft">
@@ -112,12 +112,12 @@ const DriveExplorerListItem = ({ item }: DriveExplorerItemProps): JSX.Element =>
       }
 
       {/* DATE */}
-      <div className="block w-date items-center whitespace-nowrap">
+      <div className="block shrink-0 w-date items-center whitespace-nowrap">
         {dateService.formatDefaultDate(item.updatedAt, t)}
       </div>
 
       {/* SIZE */}
-      <div className="w-size items-center whitespace-nowrap">
+      <div className="w-size shrink-0 items-center whitespace-nowrap">
         {sizeService.bytesToString(item.size, false) === '' ? (
           <span className="opacity-25">—</span>
         ) : (

diff --git a/src/app/shared/components/Breadcrumbs/BreadcrumbsMenu/BreadcrumbsMenuDrive.tsx b/src/app/shared/components/Breadcrumbs/BreadcrumbsMenu/BreadcrumbsMenuDrive.tsx
@@ -89,7 +89,7 @@ const BreadcrumbsMenuDrive = (props: BreadcrumbsMenuProps): JSX.Element => {
 
   return (
     <Dropdown
-      classButton="flex max-w-fit flex-1 cursor-pointer flex-row items-center truncate rounded-md p-1 px-1.5 font-medium text-gray-100 outline-none hover:bg-gray-5 focus-visible:bg-gray-5"
+      classButton="flex w-full overflow-hidden flex-1 cursor-pointer flex-row items-center truncate rounded-md p-1 px-1.5 font-medium text-gray-100 outline-none hover:bg-gray-5 focus-visible:bg-gray-5"
       classMenuItems={`absolute z-10 mt-1 w-56 rounded-md border border-gray-10 bg-surface text-base shadow-subtle-hard outline-none dark:bg-gray-5 ${
         isSharedView && 'hidden'
       }`}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,5 +3,5 @@ const { config } = require('@internxt/css-config');
 
 module.exports = {
   ...config,
-  content: [...config.content, './node_modules/@internxt/ui/**/*.{js,ts,jsx,tsx}'],
+  content: [...config.content, './node_modules/@internxt/ui/dist/**/*.{js,ts,jsx,tsx}'],
 };