fix: text overflow when collection name is big

inertia/components/dashboard/link/item/link_item.tsx

@@ -1,4 +1,4 @@
-import { Card, Group, Text } from '@mantine/core';
+import { Card, Flex, Group, Text } from '@mantine/core';
 import { AiFillStar } from 'react-icons/ai';
 import { ExternalLinkStyled } from '~/components/common/external_link_styled';
 import LinkFavicon from '~/components/dashboard/link/item/favicon/link_favicon';
@@ -15,48 +15,35 @@ export function LinkItem({ link, hideMenu: hideMenu = false }: LinkItemProps) {
 	const { name, url, description } = link;
 	const showFavoriteIcon = !hideMenu && 'favorite' in link && link.favorite;
 	return (
-		<Card className={styles.linkWrapper} padding="sm" radius="sm" withBorder>
-			<Group className={styles.linkHeader} justify="center">
-				<LinkFavicon url={url} />
-				<ExternalLinkStyled href={url} style={{ flex: 1 }}>
-					<div className={styles.linkName}>
-						<Text lineClamp={1}>
+		<ExternalLinkStyled href={url} title={url}>
+			<Card className={styles.linkWrapper}>
+				<Group justify="center" wrap="nowrap">
+					<LinkFavicon url={url} />
+					<Flex style={{ width: '100%' }} direction="column">
+						<Text lineClamp={1} c="blue">
 							{name} {showFavoriteIcon && <AiFillStar color="gold" />}
 						</Text>
-					</div>
-					<LinkItemURL url={url} />
-				</ExternalLinkStyled>
-				{!hideMenu && <LinkControls link={link} />}
-			</Group>
-			{description && (
-				<Text className={styles.linkDescription} c="dimmed" size="sm">
-					{description}
-				</Text>
-			)}
-		</Card>
+						<LinkItemURL url={url} />
+					</Flex>
+					{!hideMenu && <LinkControls link={link} />}
+				</Group>
+				{description && (
+					<Text c="dimmed" size="sm" mt="xs" lineClamp={3}>
+						{description}
+					</Text>
+				)}
+			</Card>
+		</ExternalLinkStyled>
 	);
 }
 
 function LinkItemURL({ url }: { url: Link['url'] }) {
 	try {
-		const { origin, pathname, search } = new URL(url);
-		let text = '';
-
-		if (pathname !== '/') {
-			text += pathname;
-		}
-
-		if (search !== '') {
-			if (text === '') {
-				text += '/';
-			}
-			text += search;
-		}
-
+		const { origin, pathname } = new URL(url);
 		return (
 			<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
 				{origin}
-				<span className={styles.linkUrlPathname}>{text}</span>
+				{pathname}
 			</Text>
 		);
 	} catch (error) {