From 8300452408090943539eba39279490cca3b05591 Mon Sep 17 00:00:00 2001
From: David Dong <73568310+DongHY1@users.noreply.github.com>
Date: Fri, 21 Jun 2024 10:52:41 +0800
Subject: [PATCH] fix: padding and moviecard width (#54)

* feat: add tabs padding

* fix: add min width in movie card
---
 src/pages/list/+Page.jsx                      | 4 ++--
 src/pages/list/components/movie/MovieList.jsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/list/+Page.jsx b/src/pages/list/+Page.jsx
index c7dda77..95d187e 100644
--- a/src/pages/list/+Page.jsx
+++ b/src/pages/list/+Page.jsx
@@ -4,8 +4,8 @@ import { SongCover, SongList } from "./components/music";
 
 export default function Page() {
 	return (
-		<Tabs defaultValue="Music" className="h-full w-96 mt-12">
-			<TabsList className="grid w-full grid-cols-2 mb-4">
+		<Tabs defaultValue="Music" className="h-full w-96 mt-12 p-4">
+			<TabsList className="grid w-full grid-cols-2 mb-4 ">
 				<TabsTrigger value="Music">Music</TabsTrigger>
 				<TabsTrigger value="Movies">Movies</TabsTrigger>
 			</TabsList>
diff --git a/src/pages/list/components/movie/MovieList.jsx b/src/pages/list/components/movie/MovieList.jsx
index 6e482e4..61fcda3 100644
--- a/src/pages/list/components/movie/MovieList.jsx
+++ b/src/pages/list/components/movie/MovieList.jsx
@@ -5,7 +5,7 @@ function MovieItem({ title, year, imageUrl }) {
 		<div className="flex group p-4 w-full hover:bg-zinc-100 hover:rounded-md">
 			<div
 				style={{ backgroundImage: `url('${MOVIE_BASEURL}${imageUrl}.jpg')` }}
-				className="rounded-md border drop-shadow-md flex justify-center items-center bg-cover bg-center h-44 w-32"
+				className="rounded-md border drop-shadow-md flex justify-center items-center bg-cover bg-center h-44 min-w-32"
 			></div>
 			<div className="flex flex-col justify-start items-start ml-4 gap-2">
 				<div className="text-black/80 font-normal">{title}</div>