From 16096f4b70e6dff8d14f8925559d3e5748a5652d Mon Sep 17 00:00:00 2001 From: Trey T Date: Mon, 20 Apr 2026 18:24:02 -0500 Subject: [PATCH] Parity gallery: force uniform aspect ratio + object-fit so Android and iOS screenshots render at identical display size regardless of native capture dimensions. Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/parity-gallery.html | 13 ++++++++++--- scripts/build_parity_gallery.py | 13 ++++++++++--- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/docs/parity-gallery.html b/docs/parity-gallery.html index d0ee7f3..3a4d5f1 100644 --- a/docs/parity-gallery.html +++ b/docs/parity-gallery.html @@ -23,10 +23,17 @@ .row { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 12px; margin-bottom: 8px; align-items: start; } .label { font-size: 12px; color: #c9d1d9; padding-top: 4px; } - .row img { width: 100%; border: 1px solid #30363d; border-radius: 4px; display: block; } + /* Force every screenshot — Android and iOS — into the same display box. + Native capture sizes differ (Android 360×800 @1x, iOS 390×844 @2x) so + without a forced aspect-ratio + object-fit the row heights shift by a + few percent per platform, making side-by-side comparisons noisy. */ + .row img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: contain; + background: #0d1117; border: 1px solid #30363d; border-radius: 4px; + display: block; } .missing { display: flex; flex-direction: column; align-items: center; justify-content: center; - min-height: 200px; background: #21262d; border-radius: 4px; - font-size: 13px; font-weight: 600; padding: 8px; } + aspect-ratio: 9 / 19.5; width: 100%; + background: #21262d; border-radius: 4px; + font-size: 13px; font-weight: 600; padding: 8px; box-sizing: border-box; } .missing.missing-needed { border: 2px dashed #f85149; color: #f85149; } .missing.missing-platform { border: 1px solid #30363d; color: #8b949e; } .missing .hint { color: #6e7681; font-size: 10px; font-weight: 400; diff --git a/scripts/build_parity_gallery.py b/scripts/build_parity_gallery.py index adc87d7..6c25401 100755 --- a/scripts/build_parity_gallery.py +++ b/scripts/build_parity_gallery.py @@ -329,10 +329,17 @@ PAGE_HEAD = """ .row { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 12px; margin-bottom: 8px; align-items: start; } .label { font-size: 12px; color: #c9d1d9; padding-top: 4px; } - .row img { width: 100%; border: 1px solid #30363d; border-radius: 4px; display: block; } + /* Force every screenshot — Android and iOS — into the same display box. + Native capture sizes differ (Android 360×800 @1x, iOS 390×844 @2x) so + without a forced aspect-ratio + object-fit the row heights shift by a + few percent per platform, making side-by-side comparisons noisy. */ + .row img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: contain; + background: #0d1117; border: 1px solid #30363d; border-radius: 4px; + display: block; } .missing { display: flex; flex-direction: column; align-items: center; justify-content: center; - min-height: 200px; background: #21262d; border-radius: 4px; - font-size: 13px; font-weight: 600; padding: 8px; } + aspect-ratio: 9 / 19.5; width: 100%; + background: #21262d; border-radius: 4px; + font-size: 13px; font-weight: 600; padding: 8px; box-sizing: border-box; } .missing.missing-needed { border: 2px dashed #f85149; color: #f85149; } .missing.missing-platform { border: 1px solid #30363d; color: #8b949e; } .missing .hint { color: #6e7681; font-size: 10px; font-weight: 400;