diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx index e97ac90..0e236b4 100644 --- a/src/components/Links/Links.tsx +++ b/src/components/Links/Links.tsx @@ -39,7 +39,7 @@ export default function Links({ return (

- + {name} — {links.length} diff --git a/src/components/Links/links.module.scss b/src/components/Links/links.module.scss index 6b5b978..c95d5f7 100644 --- a/src/components/Links/links.module.scss +++ b/src/components/Links/links.module.scss @@ -3,16 +3,26 @@ .no-link, .no-category { + min-width: 0; display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; animation: fadein 0.3s both; + + & p { + min-width: 0; + width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } } .links-wrapper { height: 100%; + min-width: 0; padding: 10px; display: flex; flex: 1; @@ -36,6 +46,13 @@ align-items: center; justify-content: space-between; + & .category-name { + width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + & .category-controls { display: flex; gap: 0.5em; @@ -46,6 +63,7 @@ .links { height: 100%; width: 100%; + min-width: 0; display: flex; flex: 1; gap: 0.5em; @@ -101,9 +119,10 @@ } & .link-name { - display: flex; - align-items: center; - gap: 0.5em; + width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } & .link-name .link-category { diff --git a/src/components/QuickActions/EditItem.tsx b/src/components/QuickActions/EditItem.tsx index bde81a7..bdc7a92 100644 --- a/src/components/QuickActions/EditItem.tsx +++ b/src/components/QuickActions/EditItem.tsx @@ -9,16 +9,18 @@ export default function EditItem({ type, id, onClick, + className = "", }: { type: "category" | "link"; id: Link["id"] | Category["id"]; onClick?: (event: any) => void; // FIXME: find good event type + className?: string; }) { return ( diff --git a/src/components/SideMenu/Categories/CategoryItem.tsx b/src/components/SideMenu/Categories/CategoryItem.tsx index 9cafb01..c18ea05 100644 --- a/src/components/SideMenu/Categories/CategoryItem.tsx +++ b/src/components/SideMenu/Categories/CategoryItem.tsx @@ -50,6 +50,7 @@ function MenuOptions({ id }: { id: number }): JSX.Element { type="category" id={id} onClick={(event) => event.stopPropagation()} + className={styles["option-edit"]} />