use grid-cols instead of flex-basis for bookmarks

Fixes #507

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

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} />
             ))}