From 6cbdc9d0dfe2237845f66135ba59738111f8a3c0 Mon Sep 17 00:00:00 2001
From: Aymeric <123820772+Aymerix01@users.noreply.github.com>
Date: Mon, 17 Jul 2023 16:41:12 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84Fix=20broken=20layout=20due=20to=20?=
 =?UTF-8?q?long=20folder/file=20name=20(#117=20&=20#124)=20(#137)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄Fix broken layout due to long folder/file name
---
 .../client/body/drive/documents/document-row.tsx  |  5 +++--
 .../client/body/drive/documents/folder-row.tsx    |  5 +++--
 .../views/client/body/drive/documents/style.scss  |  7 +++++++
 .../app/views/client/body/drive/header-path.tsx   | 15 ++++++++++++++-
 4 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 tdrive/frontend/src/app/views/client/body/drive/documents/style.scss

diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx b/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
index 2bc65396..b1f140da 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
+++ b/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">
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 8c716e33..31888eb0 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
@@ -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">
diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/style.scss b/tdrive/frontend/src/app/views/client/body/drive/documents/style.scss
new file mode 100644
index 00000000..6b139c98
--- /dev/null
+++ b/tdrive/frontend/src/app/views/client/body/drive/documents/style.scss
@@ -0,0 +1,7 @@
+.maxWidth100 {
+    max-width: 100px;
+}
+
+.minWidth80 {
+    min-width: 80;
+}
\ No newline at end of file
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 106af0dd..cc573078 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
@@ -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" />