fix: image center on mobile

Author: agmmtoo

app/(protected)/books/[id]/page.tsx

@@ -73,7 +73,7 @@ export default async function BookDetailsPage({
           priority
         />
       </div>
-      <div className="place-self-center text-center border-t">
+      <div className="place-self-center text-center pt-4 border-t">
         <p className="text-gray-600">{bookRes.data.author}</p>
         <p className="text-sm text-gray-500">{bookRes.data.code}</p>
       </div>

app/(protected)/borrows/[id]/page.tsx

@@ -125,14 +125,14 @@ export default async function BorrowDetailsPage({
           <CardHeader>
             <CardTitle>Book Information</CardTitle>
           </CardHeader>
-          <CardContent className="grid md:grid-cols-2 gap-4">
+          <CardContent className="grid place-self-center md:grid-cols-2 gap-4">
             <Link href={`/books/${borrowRes.data.book.id}`}>
               <Image
                 src={borrowRes.data.book?.cover ?? '/book-placeholder.svg'}
                 alt={borrowRes.data.book.title + "'s cover"}
                 width={256}
                 height={256}
-                className="shadow-md rounded-md w-56 h-auto hover:shadow-md hover:scale-105 transition-transform"
+                className="rounded-md w-56 h-auto hover:shadow-md hover:scale-105 transition-transform"
               />
             </Link>
             <div>