From 48912988915ae40606a900a6f1dd23fc25ed567f Mon Sep 17 00:00:00 2001
From: sct <ryan@sct.dev>
Date: Mon, 21 Dec 2020 15:45:55 +0900
Subject: [PATCH] fix(frontend): adjust person card layout to deal with
 overflowing content

fixes #416
---
 src/components/PersonCard/index.tsx | 30 +++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx
index 54d5f656..592ab445 100644
--- a/src/components/PersonCard/index.tsx
+++ b/src/components/PersonCard/index.tsx
@@ -25,18 +25,19 @@ const PersonCard: React.FC<PersonCardProps> = ({
           } bg-gray-600 rounded-lg text-white shadow-lg hover:bg-gray-500 transition ease-in-out duration-150 cursor-pointer`}
         >
           <div style={{ paddingBottom: '150%' }}>
-            <div className="absolute inset-0 flex flex-col items-center justify-center">
+            <div className="absolute inset-0 flex flex-col items-center w-full h-full p-2">
               {profilePath && (
-                <div
-                  style={{
-                    backgroundImage: `url(https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath})`,
-                  }}
-                  className="rounded-full w-28 h-28 md:w-32 md:h-32 bg-cover bg-center mb-6"
-                />
+                <div className="relative flex justify-center w-full mt-2 mb-4 h-1/2">
+                  <img
+                    src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
+                    className="object-cover w-3/4 h-full bg-center bg-cover rounded-full"
+                    alt=""
+                  />
+                </div>
               )}
               {!profilePath && (
                 <svg
-                  className="w-28 h-28 md:w-32 md:h-32 mb-6"
+                  className="mb-6 w-28 h-28 md:w-32 md:h-32"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -48,12 +49,21 @@ const PersonCard: React.FC<PersonCardProps> = ({
                   />
                 </svg>
               )}
-              <div className="whitespace-normal text-center">{name}</div>
+              <div className="w-full text-center truncate">{name}</div>
               {subName && (
-                <div className="whitespace-normal text-center text-sm text-gray-300">
+                <div
+                  className="overflow-hidden text-sm text-center text-gray-300 whitespace-normal"
+                  style={{
+                    WebkitLineClamp: 2,
+                    display: '-webkit-box',
+                    overflow: 'hidden',
+                    WebkitBoxOrient: 'vertical',
+                  }}
+                >
                   {subName}
                 </div>
               )}
+              <div className="absolute bottom-0 left-0 right-0 h-12 rounded-b-lg bg-gradient-to-t from-gray-600" />
             </div>
           </div>
         </div>