From d6ec10dfab51e9a890c5a799ce114b6c1d1e15fd Mon Sep 17 00:00:00 2001
From: Lana Begunova <70295997+lana-20@users.noreply.github.com>
Date: Mon, 5 Oct 2026 18:10:28 -0700
Subject: [PATCH] Screenshots keep their proportions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Docusaurus writes each image's own width and height on the tag, and the
max-height on .markdown img held the height down while the width attribute
held, so a 360x800 phone screenshot was drawn 358x518 — squashed toward
square. width and height auto scale it as a whole.
---
 src/css/custom.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index ad323e5..1bb21bf 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -24,8 +24,14 @@
   --ifm-background-color: #141826;
 }
 
-/* Screenshots of a phone: not the full width of the page. */
+/* Screenshots of a phone: not the full width of the page. Docusaurus writes
+   each image's own width and height on the tag; with only a max-height the
+   width attribute held, and a phone squashed to near square. Both auto
+   scale it as a whole. */
 .markdown img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
   max-height: 520px;
   border: 1px solid var(--ifm-color-emphasis-300);
   border-radius: 8px;