feat: improve & fix some styles

src/components/BlockWrapper/block-wrapper.module.scss

@@ -24,9 +24,9 @@
     cursor: pointer;
     height: fit-content;
     width: 100%;
+    font-size: 0.9em;
     background-color: $white;
-    padding: 7px 12px;
-    border: 1px solid $lightest-grey;
+    padding: 0.5em 1em;
     border-bottom: 2px solid $lightest-grey;
     border-radius: 3px;
     transition: 0.15s;

src/components/Links/Links.tsx

@@ -39,20 +39,17 @@ export default function Links({
   return (
     <div className={styles["links-wrapper"]}>
       <h2 className={styles["category-header"]}>
-        <span
-          className={styles["category-name"]}
-          style={{ display: "flex", alignItems: "center", gap: ".25em" }}
-        >
-          {isMobile && (
-            <ButtonLink
-              style={{
-                display: "flex",
-              }}
-              onClick={openMobileModal}
-            >
-              <RxHamburgerMenu size={"1.5em"} style={{ marginRight: ".5em" }} />
-            </ButtonLink>
-          )}
+        {isMobile && (
+          <ButtonLink
+            style={{
+              display: "flex",
+            }}
+            onClick={openMobileModal}
+          >
+            <RxHamburgerMenu size={"1.5em"} style={{ marginRight: ".5em" }} />
+          </ButtonLink>
+        )}
+        <span className={styles["category-name"]}>
           {name}
           {links.length > 0 && (
             <span className={styles["links-count"]}> — {links.length}</span>

src/components/Links/links.module.scss

@@ -23,7 +23,7 @@
 }
 
 .links-wrapper {
-  height: calc(100% - 54px); // FIXME: eurk
+  height: calc(100%); // FIXME: eurk
   min-width: 0;
   padding: 10px;
   display: flex;
@@ -45,10 +45,12 @@
 
 .category-header {
   display: flex;
+  gap: 0.25em;
   align-items: center;
   justify-content: space-between;
 
   & .category-name {
+    min-width: 0;
     width: 100%;
     text-overflow: ellipsis;
     white-space: nowrap;

src/components/QuickActions/Search.tsx

@@ -1,5 +1,5 @@
 import ButtonLink from "components/ButtonLink";
-import { BsSearch } from "react-icons/bs";
+import { BiSearchAlt } from "react-icons/bi";
 
 import styles from "./quickactions.module.scss";
 
@@ -10,7 +10,7 @@ export default function QuickActionSearch({
 }) {
   return (
     <ButtonLink className={styles["action"]} onClick={openSearchModal}>
-      <BsSearch />
+      <BiSearchAlt />
     </ButtonLink>
   );
 }

src/components/SideMenu/Categories/CategoryItem.tsx

@@ -51,6 +51,7 @@ export default function CategoryItem({
         gap: ".25em",
         transition: "none",
       }}
+      title={category.name}
     >
       {category.id === categoryActive.id ? (
         <AiFillFolderOpen size={24} />

src/components/SideMenu/Categories/categories.module.scss

@@ -11,25 +11,23 @@
 }
 
 .items {
-  padding-right: 5px;
-  overflow-y: scroll;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .item {
+  border-bottom: 2px solid transparent !important;
   display: flex;
   align-items: center;
   justify-content: space-between;
 
   &.active {
-    color: $white;
-    background: $blue;
-    border-color: $blue;
+    color: $blue;
+    border-bottom: 2px solid $lightest-grey !important;
   }
 
   &:hover:not(.active) {
     color: $blue;
-    background: $white;
-    border-bottom: 2px solid $blue;
   }
 
   &.active .menu-item .option-edit svg {
@@ -37,7 +35,7 @@
   }
 
   & .content {
-    width: 100%;
+    width: calc(100% - 42px);
     display: flex;
     flex: 1;
     align-items: center;
@@ -55,9 +53,6 @@
       color: $grey;
     }
   }
-  &:hover .content {
-    width: calc(100% - 42px);
-  }
 
   & .menu-item {
     height: 100%;

src/components/SideMenu/Favorites/FavoriteItem.tsx

@@ -9,9 +9,9 @@ export default function FavoriteItem({ link }: { link: Link }): JSX.Element {
   const { name, url, category } = link;
   return (
     <li className={styles["item"]}>
-      <LinkTag href={url} target={"_blank"} rel={"noreferrer"}>
-        <LinkFavicon url={url} size={24} />
-        <span>{name}</span>
+      <LinkTag href={url} target={"_blank"} rel={"noreferrer"} title={name}>
+        <LinkFavicon url={url} size={24} noMargin />
+        <span className={styles["link-name"]}>{name}</span>
         <span className={styles["category"]}> - {category.name}</span>
       </LinkTag>
     </li>

src/components/SideMenu/Favorites/favorites.module.scss

@@ -27,16 +27,29 @@
   & a {
     width: 100%;
     color: inherit;
-    padding: 0.65em 1.15em;
+    padding: 0.5em 1em;
     border: 0 !important;
     display: flex;
     align-items: center;
     gap: 0.25em;
   }
 
+  & .link-name {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   & .category {
-    color: $grey;
+    max-width: 75px;
     font-size: 0.85em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: $grey;
+    display: block;
+    overflow: hidden;
   }
 
   &:not(:last-child) {

src/styles/globals.scss

@@ -1,11 +1,12 @@
 @import "keyframes.scss";
 @import "colors.scss";
 
-* {
-  box-sizing: border-box;
+*:not(html) {
   outline: 0;
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 html,
@@ -13,13 +14,24 @@ body {
   height: 100dvh;
   width: 100dvw;
   color: $black;
-  background-color: $light-grey;
   font-family: "Poppins", sans-serif;
-  padding: 0;
-  margin: 0;
+  background-color: $light-grey;
+}
+
+html {
   overflow: hidden;
 }
 
+body {
+  overflow: auto;
+  scrollbar-gutter: stable both-edges;
+
+  &.lock-scroll {
+    scrollbar-gutter: unset;
+    overflow: hidden;
+  }
+}
+
 #__next {
   height: 100%;
   width: 100%;