ysandler/midrashim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adjust user feed responsive layout

Browse Source
This commit is contained in:
Yehoshua Sandler 2025-05-01 22:01:30 -05:00
parent 9db5736487
commit 3b1ec9becb
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Feed/UserFeed.tsx
View File

@ -176,7 +176,7 @@ const UserFeed = async (props: Props) => {
<h2 className="text-lg font-semibold text-foreground">Inbound Activity</h2> <h2 className="text-lg font-semibold text-foreground">Inbound Activity</h2>
<div className="my-3"> <div className="my-3">
<h3 className="text-base font-semibold text-muted-foreground mb-4">Your Holds</h3> <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) => { {holdRequests.docs?.map((h) => {
const book = h.book as Book const book = h.book as Book
const repository = h.repository as Repository const repository = h.repository as Repository
@ -186,9 +186,9 @@ const UserFeed = async (props: Props) => {
: '' : ''
return ( 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}`}> <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"> <CardHeader className="-mb-4">
<CardTitle className="text-overflow-ellipsis line-clamp-2"> <CardTitle className="text-overflow-ellipsis line-clamp-2">
{book.title} {book.title}
@ -198,7 +198,7 @@ const UserFeed = async (props: Props) => {
<CardContent> <CardContent>
<Image <Image
alt="book cover" alt="book cover"
className="mx-auto w-full" className="mx-auto h-[170px]"
width={120} width={120}
height={180} height={180}
src={ src={