From 62cf9655b075bb74783678c261052eefa27e4b8d Mon Sep 17 00:00:00 2001
From: Jade Ellis <jade@ellis.link>
Date: Mon, 2 Sep 2024 19:32:02 +0100
Subject: [PATCH] Work around Chrome image bug causing CLS

---
 packages/website/src/lib/htmlComponents/img.svelte | 3 ++-
 packages/website/src/lib/styles.css                | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/website/src/lib/htmlComponents/img.svelte b/packages/website/src/lib/htmlComponents/img.svelte
index b0f7861c..2db125a4 100644
--- a/packages/website/src/lib/htmlComponents/img.svelte
+++ b/packages/website/src/lib/htmlComponents/img.svelte
@@ -22,6 +22,7 @@
         height={thumb?.originalHeight}
         style:background-image={loaded ? "none" : `url('${thumb?.thumbSrc}')`}
         on:load={() => loaded = true}
+        style:--aspect-ratio={thumb?.originalWidth / thumb?.originalHeight}
     />
     {#if title}
         <figcaption>{title}</figcaption>
@@ -42,12 +43,12 @@
 
 <style>
     img {
-        max-height: 60vh;
         height: 100%;
         background-size: cover;
         background-repeat: no-repeat;
         display: block;
         margin-inline: auto;
+        max-width: calc(min(100%, 60vh * var(--aspect-ratio)));
     }
     figure {
         text-align: center;
diff --git a/packages/website/src/lib/styles.css b/packages/website/src/lib/styles.css
index 80551b68..4edd67c4 100644
--- a/packages/website/src/lib/styles.css
+++ b/packages/website/src/lib/styles.css
@@ -115,10 +115,13 @@ body {
 iframe,
 img,
 svg {
-    max-block-size: 100%;
+    /* max-block-size: 100%;
     max-inline-size: 100%;
     inline-size: auto;
-    block-size: auto;
+    block-size: auto; */
+    max-width: 100%;
+    height: auto;
+    width: 100%;
     display: block;
 }