From 1938f6ea233fe8966f141ac60d1719288204c227 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Fri, 15 Nov 2024 14:23:39 +0100
Subject: [PATCH] fix: collection name not displayed correctly when too large.

---
 .../dashboard/collection/item/collection_item.tsx     | 11 ++++++++---
 inertia/components/dashboard/dashboard_header.tsx     |  2 +-
 .../dashboard/favorite/item/favorite_item.tsx         |  8 +++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/inertia/components/dashboard/collection/item/collection_item.tsx b/inertia/components/dashboard/collection/item/collection_item.tsx
index d3a3d4e..ece06f5 100644
--- a/inertia/components/dashboard/collection/item/collection_item.tsx
+++ b/inertia/components/dashboard/collection/item/collection_item.tsx
@@ -33,14 +33,19 @@ export default function CollectionItem({
 			href={appendCollectionId(route('dashboard').path, collection.id)}
 			key={collection.id}
 			ref={itemRef}
+			title={collection.name}
 		>
 			<FolderIcon className={classes.linkIcon} />
-			<Text lineClamp={1} maw={showLinks ? '160px' : '200px'}>
+			<Text lineClamp={1} maw={'200px'} style={{ wordBreak: 'break-all' }}>
 				{collection.name}
 			</Text>
 			{showLinks && (
-				<Text c="var(--mantine-color-gray-5)" ml="xs">
-					— {linksCount}
+				<Text
+					style={{ whiteSpace: 'nowrap' }}
+					c="var(--mantine-color-gray-5)"
+					ml={4}
+				>
+					— {linksCount}0
 				</Text>
 			)}
 		</Link>
diff --git a/inertia/components/dashboard/dashboard_header.tsx b/inertia/components/dashboard/dashboard_header.tsx
index d41857a..381b4b8 100644
--- a/inertia/components/dashboard/dashboard_header.tsx
+++ b/inertia/components/dashboard/dashboard_header.tsx
@@ -43,7 +43,7 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 						hiddenFrom="sm"
 						size="sm"
 					/>
-					<Box w="50%">
+					<Box>
 						<Text lineClamp={1}>
 							{activeCollection?.name}{' '}
 							{activeCollection?.visibility === Visibility.PUBLIC && (
diff --git a/inertia/components/dashboard/favorite/item/favorite_item.tsx b/inertia/components/dashboard/favorite/item/favorite_item.tsx
index b3ab8ae..207ea1d 100644
--- a/inertia/components/dashboard/favorite/item/favorite_item.tsx
+++ b/inertia/components/dashboard/favorite/item/favorite_item.tsx
@@ -14,7 +14,13 @@ export const FavoriteItem = ({ link }: { link: LinkWithCollection }) => (
 					<Text lineClamp={1} c="blue">
 						{link.name}
 					</Text>
-					<Text c="gray" size="xs" mb={4} lineClamp={1}>
+					<Text
+						c="gray"
+						size="xs"
+						mb={4}
+						lineClamp={1}
+						style={{ wordBreak: 'break-all' }}
+					>
 						{link.collection.name}
 					</Text>
 				</Flex>