Fix: correct iconsOnly bookmark group spacing (#4502)

gethomepage · Dec 28, 2024 · 43decb0 · 43decb0
1 parent e4d42b5
commit 43decb0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
@@ -24,9 +24,9 @@ export default function BookmarksGroup({
     <div
       key={bookmarks.name}
       className={classNames(
-        "bookmark-group",
+        "bookmark-group flex-1 overflow-hidden",
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/4 lg:basis-1/5 xl:basis-1/6",
-        layout?.header === false ? "flex-1 px-1 -my-1 overflow-hidden" : "flex-1 p-1 overflow-hidden",
+        layout?.header === false ? "px-1" : "p-1 pb-0",
       )}
     >
       <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>

diff --git a/src/components/bookmarks/list.jsx b/src/components/bookmarks/list.jsx
@@ -5,15 +5,14 @@ import { columnMap } from "../../utils/layout/columns";
 import Item from "components/bookmarks/item";
 
 export default function List({ bookmarks, layout, bookmarksStyle }) {
-  let classes =
-    layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col mt-3 bookmark-list";
+  let classes = layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col bookmark-list";
   const style = {};
   if (layout?.iconsOnly || bookmarksStyle === "icons") {
-    classes = "grid gap-3 mt-3 bookmark-list";
+    classes = "grid gap-2 bookmark-list";
     style.gridTemplateColumns = "repeat(auto-fill, minmax(60px, 1fr))";
   }
   return (
-    <ul className={classNames(classes)} style={style}>
+    <ul className={classNames(classes, "mb-2", layout?.header === false ? "" : "mt-3")} style={style}>
       {bookmarks.map((bookmark) => (
         <Item
           key={`${bookmark.name}-${bookmark.href}`}