From b32c583171cf363e1c36ecacdc2336ad375973a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yannik=20R=C3=B6del?= <hey@yannik.info>
Date: Sun, 18 Dec 2022 12:46:22 +0100
Subject: [PATCH] Fix gallery preview rendering bug in Chrome

Since 1fr technically resolves to minmax(auto, 1fr), we were getting
images that are larger that we expect.
---
 styles/components/_timeline.scss | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/styles/components/_timeline.scss b/styles/components/_timeline.scss
index e81d76b..15c070f 100644
--- a/styles/components/_timeline.scss
+++ b/styles/components/_timeline.scss
@@ -146,8 +146,8 @@
 .gallery-preview {
 	position: relative;
 	display: grid;
-	grid-template-columns: var(--x1, 50%) 1fr;
-	grid-template-rows: var(--y1, 50%) 1fr;
+	grid-template-columns: var(--x1, 50%) minmax(0, 1fr);
+	grid-template-rows: var(--y1, 50%) minmax(0, 1fr);
 	gap: layout.$tiny-gap;
 	padding: layout.$tiny-gap;
 	height: 27rem;
@@ -191,8 +191,8 @@
 	}
 
 	&:hover {
-		grid-template-columns: var(--x2, var(--x1, 50%)) 1fr;
-		grid-template-rows: var(--y2, var(--x2, 50%)) 1fr;
+		grid-template-columns: var(--x2, var(--x1, 50%)) minmax(0, 1fr);
+		grid-template-rows: var(--y2, var(--x2, 50%)) minmax(0, 1fr);
 
 		&::after {
 			opacity: 1;
@@ -200,24 +200,26 @@
 	}
 
 	&.horizontal {
-		grid-template-columns: var(--a1, 33.3%) var(--b1, 33.3%) 1fr;
+		grid-template-columns: var(--a1, 33.3%) var(--b1, 33.3%) minmax(0, 1fr);
 		grid-template-rows: auto;
 
 		> img:nth-of-type(1),
-		> img:nth-of-type(3) {
+		> div:nth-of-type(1) > img,
+		> img:nth-of-type(3),
+		> div:nth-of-type(3) > img {
 			grid-column: unset;
 			grid-row: unset;
 		}
 
 		&:hover {
-			grid-template-columns: var(--a2, 33.3%) var(--b2, 33.3%) 1fr;
+			grid-template-columns: var(--a2, 33.3%) var(--b2, 33.3%) minmax(0, 1fr);
 		}
 
 		&.two {
-			grid-template-columns: var(--a1, 50%) 1fr;
+			grid-template-columns: var(--a1, 50%) minmax(0, 1fr);
 
 			&:hover {
-				grid-template-columns: var(--a2, 50%) 1fr;
+				grid-template-columns: var(--a2, 50%) minmax(0, 1fr);
 			}
 		}
 	}