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"]}
/>