From bfe11cccd5cda7b1ed0def8e6baf7be8f0d59c20 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Sun, 31 Oct 2021 16:15:57 -0700
Subject: [PATCH] Finally improve photo thumbnail css to reduce use of 150px
 constant.

I've attempted this so many times and always failed. object-fit:contain
and minmax(0, fr) was the solution.
---
 frontends/etiquette_flask/static/css/cards.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontends/etiquette_flask/static/css/cards.css b/frontends/etiquette_flask/static/css/cards.css
index c2758ef..b57d301 100644
--- a/frontends/etiquette_flask/static/css/cards.css
+++ b/frontends/etiquette_flask/static/css/cards.css
@@ -160,8 +160,8 @@
     display: inline-grid;
     vertical-align: top;
     grid-template:
-        "thumbnail thumbnail" auto
-        "filename  filename" 1fr
+        "thumbnail thumbnail" minmax(0, 1fr)
+        "filename  filename" 50px
         "tags      metadata" auto
         /10px      auto;
     min-width: 150px;
@@ -194,12 +194,13 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: 150px;
+    height: 100%;
 }
 .photo_card_grid .photo_card_thumbnail img
 {
-    max-width: 100%;
-    max-height: 150px;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
 }
 
 .photo_card_filename