From a3042f8e1b05a91d98f48a4aecb08e831a48fc56 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Mon, 8 Feb 2021 02:39:01 -0500
Subject: [PATCH] fix(ui): Fix card sizes on person detail pages (#881)

---
 src/components/PersonDetails/index.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/PersonDetails/index.tsx b/src/components/PersonDetails/index.tsx
index adb52984a..2d365ed07 100644
--- a/src/components/PersonDetails/index.tsx
+++ b/src/components/PersonDetails/index.tsx
@@ -92,13 +92,10 @@ const PersonDetails: React.FC = () => {
           </div>
         </div>
       </div>
-      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
+      <ul className="cardList">
         {sortedCast?.map((media, index) => {
           return (
-            <li
-              key={`list-cast-item-${media.id}-${index}`}
-              className="flex flex-col items-center col-span-1 text-center"
-            >
+            <li key={`list-cast-item-${media.id}-${index}`}>
               <TitleCard
                 id={media.id}
                 title={media.mediaType === 'movie' ? media.title : media.name}
@@ -137,13 +134,10 @@ const PersonDetails: React.FC = () => {
           </div>
         </div>
       </div>
-      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
+      <ul className="cardList">
         {sortedCrew?.map((media, index) => {
           return (
-            <li
-              key={`list-crew-item-${media.id}-${index}`}
-              className="flex flex-col items-center col-span-1 text-center"
-            >
+            <li key={`list-crew-item-${media.id}-${index}`}>
               <TitleCard
                 id={media.id}
                 title={media.mediaType === 'movie' ? media.title : media.name}