From 3b1ec9becbadebfaea67af97557df222d733c765 Mon Sep 17 00:00:00 2001
From: ysandler <ysandler@beitzah.net>
Date: Thu, 1 May 2025 22:01:30 -0500
Subject: [PATCH] feat: adjust user feed responsive layout

---
 src/components/Feed/UserFeed.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Feed/UserFeed.tsx b/src/components/Feed/UserFeed.tsx
index 872af4f..bc19572 100644
--- a/src/components/Feed/UserFeed.tsx
+++ b/src/components/Feed/UserFeed.tsx
@@ -176,7 +176,7 @@ const UserFeed = async (props: Props) => {
         <h2 className="text-lg font-semibold text-foreground">Inbound Activity</h2>
         <div className="my-3">
           <h3 className="text-base font-semibold text-muted-foreground mb-4">Your Holds</h3>
-          <ul className="flex flex-wrap justify-around gap-3 last-child-adjustment">
+          <ul className="grid grid-cols-1 gap-y-6 sm:grid-cols-3 md:grid-cols-4 last-child-adjustment">
             {holdRequests.docs?.map((h) => {
               const book = h.book as Book
               const repository = h.repository as Repository
@@ -186,9 +186,9 @@ const UserFeed = async (props: Props) => {
                 : ''
 
               return (
-                <li className="inline-block" key={book.isbn}>
+                <li className="col-span-1 auto-rows-fr inline-block" key={book.isbn}>
                   <Link className="block hover:scale-105 transition-all" href={`/books/${book.id}`}>
-                    <Card className="w-40 pt-4 pb-2">
+                    <Card className="w-48 sm:w-42 mx-auto pt-4 pb-2">
                       <CardHeader className="-mb-4">
                         <CardTitle className="text-overflow-ellipsis line-clamp-2">
                           {book.title}
@@ -198,7 +198,7 @@ const UserFeed = async (props: Props) => {
                       <CardContent>
                         <Image
                           alt="book cover"
-                          className="mx-auto w-full"
+                          className="mx-auto h-[170px]"
                           width={120}
                           height={180}
                           src={