eduvia/workavia-drive
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛 layout: Fix layout breaks if there's a folder with long name within a folder with long name (#701)

Browse Source
This commit is contained in:
lethemanh
2024-12-13 10:51:05 +07:00
parent e4dbc06202
commit ca3ad6b99b
5 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tdrive/frontend/src/app/views/client/body/drive/browser.tsx
+1 -1
View File
@@ -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">
tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx
+2 -2
View File
@@ -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) && (
tdrive/frontend/src/app/views/client/body/drive/header-path.tsx
+4 -4
View File
@@ -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) || '';
tdrive/frontend/src/app/views/client/body/index.tsx
+1 -1
View File
@@ -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>
);
tdrive/frontend/src/app/views/client/index.tsx
+1 -1
View File
@@ -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>