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;