Gallery images display at CSS pixel size instead of stretching to page
width. Slider uses grid overlay so mismatched image dimensions no longer
cause stretching. Add spacing between snapshot headers and images.

Assisted-by: Claude Opus 4.6 via Claude Code

diff --git a/templates/snapshots.css b/templates/snapshots.css
index 2a7f914..f228ab6 100644
--- a/templates/snapshots.css
+++ b/templates/snapshots.css
@@ -183,6 +183,7 @@ body:has(.sidebar) {
 .snapshot .path {
   display: block;
   margin-top: var(--space-3xs);
+  margin-bottom: var(--space-s);
   font-size: var(--step--2);
   color: #666;
 }
@@ -248,17 +249,21 @@ body:has(.sidebar) {
 
 /* ── Slider mode ── */
 
+/* Grid overlay lets both images size naturally — the taller one sets
+   the container height, avoiding stretch/crop when dimensions differ. */
 .slider-container {
-  position: relative;
+  display: grid;
   overflow: hidden;
   border-radius: 4px;
   border: 1px solid #333;
   cursor: ew-resize;
   user-select: none;
+  position: relative;
 }
 
-.slider-img {
-  display: block;
+.slider-baseline,
+.slider-current {
+  grid-area: 1 / 1;
 }
 
 .slider-baseline img,
@@ -271,17 +276,9 @@ body:has(.sidebar) {
 }
 
 .slider-current {
-  position: absolute;
-  inset: 0;
   clip-path: inset(0 0 0 50%);
 }
 
-.slider-current img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .slider-handle {
   position: absolute;
   top: 0;
@@ -532,3 +529,14 @@ body > .tab-bar {
   border-bottom: 1px solid #333;
   padding-bottom: var(--space-xs);
 }
+
+/* Gallery images at intrinsic size instead of stretching to fill the
+   page. Screenshots are captured at 2x, so cap width at half the
+   pixel dimensions (e.g. 1280px capture → 640px display). */
+body > .viewport-group .snapshot img {
+  max-width: min(100%, 640px);
+}
+
+body > .viewport-group[data-viewport="mobile"] .snapshot img {
+  max-width: min(100%, 375px);
+}