From c157be571f01eea4362b129ab73fc0c130fe8656 Mon Sep 17 00:00:00 2001
From: Silo Server Migration <noreply@silo-server.invalid>
Date: Mon, 25 May 2026 10:55:33 -0400
Subject: [PATCH] feat(requests): tighten browse grid with more columns

- Increase poster density across breakpoints and use fluid cards
---
 web/src/pages/RequestBrowse.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/RequestBrowse.tsx b/web/src/pages/RequestBrowse.tsx
index aca92885..a85b967f 100644
--- a/web/src/pages/RequestBrowse.tsx
+++ b/web/src/pages/RequestBrowse.tsx
@@ -157,7 +157,7 @@ export default function RequestBrowse({ kind }: RequestBrowseProps) {
         ) : results.length === 0 ? (
           <p className="text-muted-foreground text-sm">Nothing matched. Try a different sort.</p>
         ) : (
-          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+          <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8">
             {results.map((item) => (
               <RequestPosterCard
                 key={`${item.media_type}-${item.tmdb_id}`}
@@ -168,6 +168,7 @@ export default function RequestBrowse({ kind }: RequestBrowseProps) {
                   createRequest.isPending &&
                   pendingRequestKey === mediaRequestKey(item.media_type, item.tmdb_id)
                 }
+                fluid
               />
             ))}
           </div>
@@ -233,9 +234,9 @@ function BrowseHeaderTile({
 
 function BrowseGridSkeleton() {
   return (
-    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-      {Array.from({ length: 12 }).map((_, idx) => (
-        <Skeleton key={idx} className="aspect-[2/3] w-full rounded-md" />
+    <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8">
+      {Array.from({ length: 16 }).map((_, idx) => (
+        <Skeleton key={idx} className="aspect-[2/3] w-full rounded-lg" />
       ))}
     </div>
   );