From d39e02cb56d187ce6fa8ec3c40cd7ecfd028399e Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sat, 5 Mar 2022 18:45:21 +0100
Subject: [PATCH] Calulate max-height to only show n rows

---
 src/components/CastPerson.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/CastPerson.vue b/src/components/CastPerson.vue
index 67ccb29..3c0d45d 100644
--- a/src/components/CastPerson.vue
+++ b/src/components/CastPerson.vue
@@ -50,12 +50,13 @@ li a p:first-of-type {
   padding-top: 10px;
 }
 
-li p {
+li.card p {
   font-size: 1em;
   padding: 0 10px;
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-height: calc(10px + ((16px * var(--line-height)) * 3));
 }
 
 li.card {
@@ -99,19 +100,24 @@ li.card {
     overflow: hidden;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
+    // margin-top: auto;
+    max-height: calc((0.9em * var(--line-height)) * 1);
   }
 
   a {
     display: block;
     text-decoration: none;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
   }
 
   img {
     width: 100%;
-    height: 100%;
-    min-width: 140px;
+    height: auto;
     min-height: 210px;
-    background-color: var(--text-color-90);
+    background-color: var(--background-color);
+    object-fit: cover;
   }
 }
 </style>