🐛 layout: Fix layout breaks if there's a folder with long name within…

… a folder with long name (#701)
linagora · Dec 13, 2024 · df95a9a · df95a9a
1 parent 9bc8b29
commit df95a9a
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/tdrive/frontend/src/app/views/client/body/drive/browser.tsx b/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
@@ -357,7 +357,7 @@ export default memo(
                 (loading && (!items?.length || loadingParentChange) ? 'opacity-50 ' : '')
               }
             >
-              <div className="flex flex-row shrink-0 items-center mb-4">
+              <div className={`flex flex-row shrink-0 items-center mb-4 ${!sharedWithMe ? 'flex-wrap' : ''}`}>
                 {sharedWithMe ? (
                   <div>
                     <Title className="mb-4 block">

diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx b/tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx
@@ -46,8 +46,8 @@ export const FolderRow = ({
           fallback={<FolderIcon className="h-5 w-5 shrink-0 text-blue-500" />}
         />
       </div>
-      <div className="grow text-ellipsis whitespace-nowrap overflow-hidden">
-        <Base className="!font-semibold flex maxWidth100">{item.name}</Base>
+      <div className="grow whitespace-nowrap overflow-hidden">
+        <Base className="!font-semibold text-ellipsis overflow-hidden block max-w-full">{item.name}</Base>
       </div>
       <div className="shrink-0 ml-4">
         {hasAnyPublicLinkAccess(item) && (

diff --git a/tdrive/frontend/src/app/views/client/body/drive/header-path.tsx b/tdrive/frontend/src/app/views/client/body/drive/header-path.tsx
@@ -74,7 +74,7 @@ export const PathRender = ({
   const pathLength = (pathToRender || []).reduce((acc, curr) => acc + curr.name.length, 0);
 
   return (
-    <nav className="overflow-hidden whitespace-nowrap mr-2 pl-px inline-flex">
+    <nav className="overflow-hidden whitespace-nowrap mr-2 pl-px inline-flex md:max-w-[50%] sm:max-w-[20%]">
       {pathLength < 70 ? (
         (pathToRender || [])?.map((a, i) => (
           <PathItem
@@ -133,10 +133,10 @@ const PathItem = ({
   const { access: trashAccess } = useDriveItem('trash');
   const isInSharedWithMe = viewId === 'shared_with_me';
   return (
-    <div className="flex items-center">
+    <div className={`flex items-center ${!first ? 'overflow-hidden' : ''}`}>
       <a
         href="#"
-        className="text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white"
+        className={`text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white ${!first ? 'overflow-hidden' : ''}`}
         onClick={evt => {
           evt.preventDefault();
 
@@ -173,7 +173,7 @@ const PathItem = ({
           }
         }}
       >
-        <Title noColor={last} className={last ? 'text-blue-500' : ''}>
+        <Title noColor={last} className={!first ? 'text-blue-500 inline-block overflow-hidden text-ellipsis max-w-36' : ''}>
           {(() => {
             const isTrash = viewId?.includes('trash_') || viewId === 'trash';
             const fileName = cutFileName(item?.name) || '';

diff --git a/tdrive/frontend/src/app/views/client/body/index.tsx b/tdrive/frontend/src/app/views/client/body/index.tsx
@@ -16,7 +16,7 @@ const MainView: FC<PropsType> = ({ className }) => {
   const channelId = useRouterChannel();
 
   return (
-    <div className={'grow min-h-full relative ' + (className ? className : '')}>
+    <div className={'grow min-h-full relative overflow-x-hidden ' + (className ? className : '')}>
       <MainContentWrapper key={companyId + workspaceId + channelId} />
     </div>
   );

diff --git a/tdrive/frontend/src/app/views/client/index.tsx b/tdrive/frontend/src/app/views/client/index.tsx
@@ -73,7 +73,7 @@ export default React.memo((): JSX.Element => {
                   onClick={() => setMenuIsOpen(false)}
                   className="absolute left-0 top-0 h-full w-full bg-black bg-opacity-50 transition-all z-40 opacity-0"
                 ></div>
-                <div className="bg-white dark:bg-zinc-900 flex grow sm:rounded-lg p-4">
+                <div className="bg-white dark:bg-zinc-900 flex grow sm:rounded-lg p-4 sm:w-2/3 overflow-x-hidden">
                   <Suspense fallback={<></>}>
                     <MainView className={classNames({ collapsed: menuIsOpen })} />
                   </Suspense>