From 282f28f2b9d0cc8c9105d01b43d4e1f730320b8b Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Mon, 8 Feb 2021 01:04:13 -0500
Subject: [PATCH] fix(ui): Size cards appropriately based on base font size
 (#871)

---
 src/components/Common/ListView/index.tsx        | 16 +++-------------
 src/components/MovieDetails/MovieCast/index.tsx |  7 ++-----
 src/components/MovieDetails/MovieCrew/index.tsx |  7 ++-----
 src/components/TvDetails/TvCast/index.tsx       |  7 ++-----
 src/components/TvDetails/TvCrew/index.tsx       |  7 ++-----
 src/styles/globals.css                          |  9 +++++++++
 6 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/src/components/Common/ListView/index.tsx b/src/components/Common/ListView/index.tsx
index fd9b6c79..5b3b0bc3 100644
--- a/src/components/Common/ListView/index.tsx
+++ b/src/components/Common/ListView/index.tsx
@@ -37,7 +37,7 @@ const ListView: React.FC<ListViewProps> = ({
           {intl.formatMessage(messages.noresults)}
         </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">
         {items?.map((title) => {
           let titleCard: React.ReactNode;
 
@@ -90,22 +90,12 @@ const ListView: React.FC<ListViewProps> = ({
               break;
           }
 
-          return (
-            <li
-              key={title.id}
-              className="flex flex-col items-center col-span-1 text-center"
-            >
-              {titleCard}
-            </li>
-          );
+          return <li key={title.id}>{titleCard}</li>;
         })}
         {isLoading &&
           !isReachingEnd &&
           [...Array(20)].map((_item, i) => (
-            <li
-              key={`placeholder-${i}`}
-              className="flex flex-col items-center col-span-1 text-center"
-            >
+            <li key={`placeholder-${i}`}>
               <TitleCard.Placeholder canExpand />
             </li>
           ))}
diff --git a/src/components/MovieDetails/MovieCast/index.tsx b/src/components/MovieDetails/MovieCast/index.tsx
index 883de9fb..af4e34b9 100644
--- a/src/components/MovieDetails/MovieCast/index.tsx
+++ b/src/components/MovieDetails/MovieCast/index.tsx
@@ -45,13 +45,10 @@ const MovieCast: React.FC = () => {
           {intl.formatMessage(messages.fullcast)}
         </Header>
       </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">
         {data?.credits.cast.map((person, index) => {
           return (
-            <li
-              key={`cast-${person.id}-${index}`}
-              className="flex flex-col items-center col-span-1 text-center"
-            >
+            <li key={`cast-${person.id}-${index}`}>
               <PersonCard
                 name={person.name}
                 personId={person.id}
diff --git a/src/components/MovieDetails/MovieCrew/index.tsx b/src/components/MovieDetails/MovieCrew/index.tsx
index 048dcadf..d5345287 100644
--- a/src/components/MovieDetails/MovieCrew/index.tsx
+++ b/src/components/MovieDetails/MovieCrew/index.tsx
@@ -45,13 +45,10 @@ const MovieCrew: React.FC = () => {
           {intl.formatMessage(messages.fullcrew)}
         </Header>
       </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">
         {data?.credits.crew.map((person, index) => {
           return (
-            <li
-              key={`crew-${person.id}-${index}`}
-              className="flex flex-col items-center col-span-1 text-center"
-            >
+            <li key={`crew-${person.id}-${index}`}>
               <PersonCard
                 name={person.name}
                 personId={person.id}
diff --git a/src/components/TvDetails/TvCast/index.tsx b/src/components/TvDetails/TvCast/index.tsx
index e34c4d58..3c0e4e4d 100644
--- a/src/components/TvDetails/TvCast/index.tsx
+++ b/src/components/TvDetails/TvCast/index.tsx
@@ -47,13 +47,10 @@ const TvCast: React.FC = () => {
           {intl.formatMessage(messages.fullseriescast)}
         </Header>
       </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">
         {data?.credits.cast.map((person) => {
           return (
-            <li
-              key={person.id}
-              className="flex flex-col items-center col-span-1 text-center"
-            >
+            <li key={person.id}>
               <PersonCard
                 name={person.name}
                 personId={person.id}
diff --git a/src/components/TvDetails/TvCrew/index.tsx b/src/components/TvDetails/TvCrew/index.tsx
index 16da0b12..f17ad96e 100644
--- a/src/components/TvDetails/TvCrew/index.tsx
+++ b/src/components/TvDetails/TvCrew/index.tsx
@@ -47,13 +47,10 @@ const TvCrew: React.FC = () => {
           {intl.formatMessage(messages.fullseriescrew)}
         </Header>
       </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">
         {data?.credits.crew.map((person, index) => {
           return (
-            <li
-              key={`crew-${person.id}-${index}`}
-              className="flex flex-col items-center col-span-1 text-center"
-            >
+            <li key={`crew-${person.id}-${index}`}>
               <PersonCard
                 name={person.name}
                 personId={person.id}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index f6ebfefb..2043f293 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -15,6 +15,15 @@ body {
   background: #f19a30;
 }
 
+ul.cardList {
+  @apply grid gap-4;
+  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
+}
+
+ul.cardList > li {
+  @apply flex flex-col items-center col-span-1 text-center;
+}
+
 .titleCard {
   @apply relative bg-gray-800 bg-cover rounded-lg;
   padding-bottom: 150%;