From ca3ad6b99bee8190382d7109f6ffb3616d4117ad Mon Sep 17 00:00:00 2001
From: lethemanh <themanhle1234@gmail.com>
Date: Fri, 13 Dec 2024 10:51:05 +0700
Subject: [PATCH] :bug: layout: Fix layout breaks if there's a folder with long
 name within a folder with long name (#701)

---
 .../frontend/src/app/views/client/body/drive/browser.tsx  | 2 +-
 .../app/views/client/body/drive/documents/folder-row.tsx  | 4 ++--
 .../src/app/views/client/body/drive/header-path.tsx       | 8 ++++----
 tdrive/frontend/src/app/views/client/body/index.tsx       | 2 +-
 tdrive/frontend/src/app/views/client/index.tsx            | 2 +-
 5 files changed, 9 insertions(+), 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
index fc34fa1b..17f6c83e 100644
--- 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
index d50f6185..7f7415a6 100644
--- 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
index a7408a83..032b5093 100644
--- 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
index a1a93bf4..8600ae47 100644
--- 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
index ef2b3a15..665081ca 100755
--- 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>