fix: collection name not displayed correctly when too large.

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">
+				<Text
-					— {linksCount}
+					style={{ whiteSpace: 'nowrap' }}
+					c="var(--mantine-color-gray-5)"
+					ml={4}
+				>
+					— {linksCount}0
 				</Text>
 			)}
 		</Link>

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 && (

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>