Use CSS grid overlay (like the slider view) so both images size
naturally instead of being forced to width:100%. Switch visibility
toggling from display:none/block to visibility:hidden/visible so the
hidden image still participates in grid sizing.

https://claude.ai/code/session_011VTWgTx1yUqypB3xAuYgn7

diff --git a/templates/snapshots.css b/templates/snapshots.css
index f228ab6..d6e9cef 100644
--- a/templates/snapshots.css
+++ b/templates/snapshots.css
@@ -339,7 +339,10 @@ body:has(.sidebar) {
 
 /* ── Toggle mode ── */
 
+/* Grid overlay lets both images size naturally — the taller one sets
+   the container height, avoiding stretch when dimensions differ. */
 .toggle-container {
+  display: grid;
   position: relative;
   border-radius: 4px;
   border: 1px solid #333;
@@ -348,17 +351,18 @@ body:has(.sidebar) {
 }
 
 .toggle-container img {
+  grid-area: 1 / 1;
   display: block;
-  width: 100%;
+  max-width: 100%;
   border: none;
   border-radius: 0;
   cursor: pointer;
 }
 
-.toggle-container[data-showing="baseline"] .toggle-baseline { display: block; }
-.toggle-container[data-showing="baseline"] .toggle-current { display: none; }
-.toggle-container[data-showing="current"] .toggle-baseline { display: none; }
-.toggle-container[data-showing="current"] .toggle-current { display: block; }
+.toggle-container[data-showing="baseline"] .toggle-baseline { visibility: visible; }
+.toggle-container[data-showing="baseline"] .toggle-current { visibility: hidden; }
+.toggle-container[data-showing="current"] .toggle-baseline { visibility: hidden; }
+.toggle-container[data-showing="current"] .toggle-current { visibility: visible; }
 
 .toggle-label {
   position: absolute;