fix: long link & cat name breaking layout

src/components/Links/Links.tsx

@@ -39,7 +39,7 @@ export default function Links({
   return (
     <div className={styles["links-wrapper"]}>
       <h2 className={styles["category-header"]}>
-        <span>
+        <span className={styles["category-name"]}>
           {name}
           <span className={styles["links-count"]}> — {links.length}</span>
         </span>

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;
+    width: 100%;
-    align-items: center;
+    text-overflow: ellipsis;
-    gap: 0.5em;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
   & .link-name .link-category {

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 (
     <LinkTag
       href={`/${type}/edit/${id}`}
       title={`Edit ${type}`}
-      className={styles["action"]}
+      className={`${styles["action"]} ${className ? className : ""}`}
       onClick={onClick && onClick}
     >
       <AiOutlineEdit />

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"]}
       />
       <RemoveItem type="category" id={id} />
     </div>