fix: text overflow when collection name is big

inertia/components/dashboard/collection/list/collection_list.module.css

@@ -14,8 +14,6 @@
 }
 
 .collectionList {
-	padding: 1px;
-	padding-right: 5px;
 	display: flex;
 	flex: 1;
 	gap: 0.35em;

inertia/components/dashboard/favorite/item/favorite_item.module.css

@@ -2,43 +2,11 @@
 	user-select: none;
 	cursor: pointer;
 	width: 100%;
-	background-color: light-dark(var(--mantine-color-gray-1), rgb(50, 58, 71));
+	background-color: light-dark(var(--mantine-color-white), rgb(50, 58, 71));
 	padding: 0.25em 0.5em !important;
-	border-radius: var(--border-radius);
 	border: 1px solid transparent;
 }
 
 .linkWrapper:hover {
 	border: 1px solid var(--mantine-color-blue-4);
 }
-
-.linkName {
-	width: 100%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-.linkDescription {
-	margin-top: 0.5em;
-	font-size: 0.8em;
-	word-wrap: break-word;
-}
-
-.linkUrl {
-	width: 100%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	font-size: 0.8em;
-	transition: opacity 0.3s;
-}
-
-.linkWrapper:hover .linkUrlPathname {
-	opacity: 1;
-}
-
-.linkUrlPathname {
-	opacity: 0;
-	transition: opacity 0.3s;
-}

inertia/components/dashboard/favorite/item/favorite_item.tsx

@@ -1,4 +1,4 @@
-import { Card, Group, Text } from '@mantine/core';
+import { Box, Card, Group, Text } from '@mantine/core';
 import { ExternalLinkStyled } from '~/components/common/external_link_styled';
 import LinkFavicon from '~/components/dashboard/link/item/favicon/link_favicon';
 import LinkControls from '~/components/dashboard/link/item/link_controls';
@@ -6,18 +6,24 @@ import { LinkWithCollection } from '~/types/app';
 import styles from './favorite_item.module.css';
 
 export const FavoriteItem = ({ link }: { link: LinkWithCollection }) => (
-	<Card className={styles.linkWrapper} radius="sm" withBorder>
+	<ExternalLinkStyled
-		<Group justify="center" gap="xs">
+		href={link.url}
-			<LinkFavicon size={32} url={link.url} />
+		title={link.url}
-			<ExternalLinkStyled href={link.url} style={{ flex: 1 }}>
+		style={{ width: '260px', maxWidth: '100%' }}
-				<div className={styles.linkName}>
+	>
-					<Text lineClamp={1}>{link.name} </Text>
+		<Card className={styles.linkWrapper}>
-				</div>
+			<Group gap="xs" wrap="nowrap">
-				<Text c="gray" size="xs" mb={4} lineClamp={1}>
+				<LinkFavicon size={32} url={link.url} />
-					{link.collection.name}
+				<Box maw="calc(100% - 80px)">
-				</Text>
+					<Text lineClamp={1} c="blue">
-			</ExternalLinkStyled>
+						{link.name}
-			<LinkControls link={link} showGoToCollection />
+					</Text>
-		</Group>
+					<Text c="gray" size="xs" mb={4} lineClamp={1}>
-	</Card>
+						{link.collection.name}
+					</Text>
+				</Box>
+				<LinkControls link={link} showGoToCollection />
+			</Group>
+		</Card>
+	</ExternalLinkStyled>
 );

inertia/components/dashboard/link/item/link.module.css

@@ -2,9 +2,8 @@
 	user-select: none;
 	cursor: pointer;
 	width: 100%;
-	background-color: light-dark(var(--mantine-color-gray-1), rgb(50, 58, 71));
+	background-color: light-dark(var(--mantine-color-white), rgb(50, 58, 71));
-	padding: 0.75em 1em;
+	padding: 0.5em 0.75em !important;
-	border-radius: var(--border-radius);
 	border: 1px solid transparent;
 }
 
@@ -12,32 +11,9 @@
 	border: 1px solid var(--mantine-color-blue-4);
 }
 
-.linkHeader {
-	display: flex;
-	gap: 1em;
-	align-items: center;
-}
-
-.linkName {
-	width: 100%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-.linkDescription {
-	margin-top: 0.5em;
-	font-size: 0.8em;
-	word-wrap: break-word;
-}
-
 .linkUrl {
-	width: 100%;
+	max-width: calc(100% - 50px);
-	text-overflow: ellipsis;
+	transition: opacity 0.15s;
-	white-space: nowrap;
-	overflow: hidden;
-	font-size: 0.8em;
-	transition: opacity 0.3s;
 }
 
 .linkWrapper:hover .linkUrlPathname {
@@ -46,5 +22,5 @@
 
 .linkUrlPathname {
 	opacity: 0;
-	transition: opacity 0.3s;
+	transition: opacity 0.15s;
 }

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

@@ -1,6 +1,7 @@
 import { Link as InertiaLink } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { ActionIcon, Menu } from '@mantine/core';
+import { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { FaRegEye } from 'react-icons/fa';
@@ -24,10 +25,17 @@ export default function LinkControls({
 	const { t } = useTranslation('common');
 
 	const onFavoriteCallback = () => toggleFavorite(link.id);
+	const handleStopPropagation = (event: MouseEvent<HTMLButtonElement>) =>
+		event.preventDefault();
+
 	return (
 		<Menu withinPortal shadow="md" width={200}>
 			<Menu.Target>
-				<ActionIcon variant="subtle" color="var(--mantine-color-text)">
+				<ActionIcon
+					variant="subtle"
+					color="var(--mantine-color-text)"
+					onClick={handleStopPropagation}
+				>
 					<BsThreeDotsVertical />
 				</ActionIcon>
 			</Menu.Target>

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>
+		<ExternalLinkStyled href={url} title={url}>
-			<Group className={styles.linkHeader} justify="center">
+			<Card className={styles.linkWrapper}>
-				<LinkFavicon url={url} />
+				<Group justify="center" wrap="nowrap">
-				<ExternalLinkStyled href={url} style={{ flex: 1 }}>
+					<LinkFavicon url={url} />
-					<div className={styles.linkName}>
+					<Flex style={{ width: '100%' }} direction="column">
-						<Text lineClamp={1}>
+						<Text lineClamp={1} c="blue">
 							{name} {showFavoriteIcon && <AiFillStar color="gold" />}
 						</Text>
-					</div>
+						<LinkItemURL url={url} />
-					<LinkItemURL url={url} />
+					</Flex>
-				</ExternalLinkStyled>
+					{!hideMenu && <LinkControls link={link} />}
-				{!hideMenu && <LinkControls link={link} />}
+				</Group>
-			</Group>
+				{description && (
-			{description && (
+					<Text c="dimmed" size="sm" mt="xs" lineClamp={3}>
-				<Text className={styles.linkDescription} c="dimmed" size="sm">
+						{description}
-					{description}
+					</Text>
-				</Text>
+				)}
-			)}
+			</Card>
-		</Card>
+		</ExternalLinkStyled>
 	);
 }
 
 function LinkItemURL({ url }: { url: Link['url'] }) {
 	try {
-		const { origin, pathname, search } = new URL(url);
+		const { origin, pathname } = new URL(url);
-		let text = '';
-
-		if (pathname !== '/') {
-			text += pathname;
-		}
-
-		if (search !== '') {
-			if (text === '') {
-				text += '/';
-			}
-			text += search;
-		}
-
 		return (
 			<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
 				{origin}
-				<span className={styles.linkUrlPathname}>{text}</span>
+				{pathname}
 			</Text>
 		);
 	} catch (error) {