From c8ea2e8703b72cf761c9e4eb16a5ab4cb0708fcd Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 26 Dec 2022 00:43:17 +0800
Subject: [PATCH] Restyle cards

Got to max-height it, and then make sure the images crop smaller
---
 src/components/status.css | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index 3eb23e5c..69854ba4 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -392,18 +392,17 @@
   border: 1px solid var(--outline-color);
   overflow: hidden;
   color: inherit;
-  align-items: center;
+  align-items: stretch;
   background: var(--bg-color);
+  max-height: 160px;
 }
 .card .image {
-  /* min-width: 120px; */
-  width: 50%;
-  max-width: 160px;
+  width: 35%;
   height: auto;
-  min-height: 120px;
-  max-height: 160px;
-  object-fit: cover;
+  flex-grow: 1;
   border-inline-end: 1px solid var(--outline-color);
+  object-fit: cover;
+  aspect-ratio: 1 / 1;
 }
 .card:hover .image {
   animation: position-object 5s ease-in-out 1s 5;
@@ -414,6 +413,8 @@
 .card .meta-container {
   padding: 8px;
   min-width: 0;
+  flex-grow: 1;
+  align-self: center;
 }
 .card .title {
   line-height: 1.25;
@@ -431,10 +432,14 @@
   font-size: smaller;
   opacity: 0.75;
   margin: 0;
-  white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  display: block;
+  display: -webkit-box;
+  display: box;
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
 }
 .card .meta.domain {
   opacity: 1;