feat: adjust user feed responsive layout
This commit is contained in:
parent
9db5736487
commit
3b1ec9becb
@ -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={
|
||||
|
Loading…
x
Reference in New Issue
Block a user