feat: adjust user feed responsive layout

This commit is contained in:
Yehoshua Sandler 2025-05-01 22:01:30 -05:00
parent 9db5736487
commit 3b1ec9becb

View File

@ -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={