From 2bcfc36bc2a3f0d1bd5c5ddea4db501a9f9be7bd Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 8 Nov 2022 10:33:11 -0800
Subject: [PATCH] use grid-cols instead of flex-basis for bookmarks

Fixes #507
---
 src/components/bookmarks/group.jsx | 2 +-
 src/pages/index.jsx                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
index 1eb86e1a3..2910245c3 100644
--- a/src/components/bookmarks/group.jsx
+++ b/src/components/bookmarks/group.jsx
@@ -3,7 +3,7 @@ import List from "components/bookmarks/list";
 
 export default function BookmarksGroup({ group }) {
   return (
-    <div key={group.name} className="basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4 flex-1">
+    <div key={group.name} className="flex-1">
       <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2>
       <ErrorBoundary>
         <List bookmarks={group.bookmarks} />
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 88c25cc47..d9e79786f 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -272,7 +272,7 @@ function Home({ initialSettings }) {
         )}
 
         {bookmarks && (
-          <div className="grow flex flex-wrap pt-0 p-4 sm:p-8 gap-x-2">
+          <div className={`grow flex flex-wrap pt-0 p-4 sm:p-8 gap-2 grid-cols-1 lg:grid-cols-2 lg:grid-cols-${Math.min(6, bookmarks.length)}`}>
             {bookmarks.map((group) => (
               <BookmarksGroup key={group.name} group={group} />
             ))}