fix(ui): Size cards appropriately based on base font size (#871)

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>
           ))}

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}

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}

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}

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}

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%;