💄Fix broken layout due to long folder/file name (#117 & #124) (#137)

* 💄Fix broken layout due to long folder/file name

tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx

@@ -21,6 +21,7 @@ import Avatar from '../../../../../atoms/avatar';
 import { PublicIcon } from '../components/public-icon';
 import { CheckableIcon, DriveItemProps } from './common';
 import { getDevice } from '../../../../../features/global/utils/device';
+import './style.scss';
 import { useHistory } from 'react-router-dom';
 import RouterServices from '@features/router/services/router-service';
 import useRouteState from 'app/features/router/hooks/use-route-state';
@@ -119,14 +120,14 @@ export const DocumentRow = ({
         />
       </div>
       <div className="grow text-ellipsis whitespace-nowrap overflow-hidden">
-        <Base>{item.name}</Base>
+        <Base className="flex maxWidth100">{item.name}</Base>
       </div>
       <div className="shrink-0 ml-4">
         {item?.access_info?.public?.level !== 'none' && (
           <PublicIcon className="h-5 w-5 text-blue-500" />
         )}
       </div>
-      <div className="shrink-0 ml-4 text-right" style={{ minWidth: 80 }}>
+      <div className="shrink-0 ml-4 text-right minWidth80">
         <BaseSmall>{formatBytes(item.size)}</BaseSmall>
       </div>
       <div className="shrink-0 ml-4">

tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx

@@ -7,6 +7,7 @@ import { formatBytes } from '@features/drive/utils';
 import { useState } from 'react';
 import { PublicIcon } from '../components/public-icon';
 import { CheckableIcon, DriveItemProps } from './common';
+import './style.scss';
 
 export const FolderRow = ({
   item,
@@ -45,14 +46,14 @@ export const FolderRow = ({
         />
       </div>
       <div className="grow text-ellipsis whitespace-nowrap overflow-hidden">
-        <Base className="!font-semibold">{item.name}</Base>
+        <Base className="!font-semibold flex maxWidth100">{item.name}</Base>
       </div>
       <div className="shrink-0 ml-4">
         {item?.access_info?.public?.level !== 'none' && (
           <PublicIcon className="h-5 w-5 text-blue-500" />
         )}
       </div>
-      <div className="shrink-0 ml-4 text-right" style={{ minWidth: 80 }}>
+      <div className="shrink-0 ml-4 text-right minWidth80">
         <BaseSmall>{formatBytes(item.size)}</BaseSmall>
       </div>
       <div className="shrink-0 ml-4">

tdrive/frontend/src/app/views/client/body/drive/documents/style.scss

@@ -0,0 +1,7 @@
+.maxWidth100 {
+    max-width: 100px;
+}
+
+.minWidth80 {
+    min-width: 80;
+}

tdrive/frontend/src/app/views/client/body/drive/header-path.tsx

@@ -25,6 +25,18 @@ export default ({
   return <PathRender inTrash={inTrash || false} path={path} onClick={id => setParentId(id)} />;
 };
 
+function cutFileName (name: any){
+  if (typeof name !== "undefined" ){
+    if (name.length >= 30){
+      return name.substring(0,30)+" ...";
+    } else {
+      return name;
+    }
+  } else {
+    return name;
+  }
+}
+
 export const PathRender = ({
   path,
   onClick,
@@ -34,6 +46,7 @@ export const PathRender = ({
   onClick: (id: string) => void;
 }) => {
   const pathLength = (path || []).reduce((acc, curr) => acc + curr.name.length, 0);
+
   return (
     <nav className="overflow-hidden whitespace-nowrap mr-2 pl-px inline-flex">
       {pathLength < 70 ? (
@@ -110,7 +123,7 @@ const PathItem = ({
           }
         }}
       >
-        <Title>{item?.name || ''}</Title>
+        <Title>{cutFileName(item?.name) || ''}</Title>
       </a>
       {item?.access_info?.public?.level && item?.access_info?.public?.level !== 'none' && (
         <PublicIcon className="h-5 w-5 ml-2" />