Unify slider and toggle sizing in snapshot diff
Slider filled the content area while toggle was capped at 640px.
Both now expand to full width for full-page screenshots. Selector
captures stay capped at 640px (half the 2x capture) via a class
derived from the manifest's existing selector field.

Assisted-by: Claude Opus 4.6 via Claude Code
change qlrooyzxuzsouultqppotvuowzuvukrp
commit ed11cc836f151d18057f29661f292b885879c7fc
author Alpha Chen <alpha@kejadlen.dev>
date
parent e7f922de
diff --git a/templates/snapshot_diff.erb b/templates/snapshot_diff.erb
index 73c0498..de6428c 100644
--- a/templates/snapshot_diff.erb
+++ b/templates/snapshot_diff.erb
@@ -56,7 +56,7 @@
     <div class="viewport-group<%= " hidden" unless i == 0 %>" data-viewport="<%= viewport %>">
       <% snapshots.each do |snap| %>
       <% entry = snap.current || snap.baseline -%>
-      <div class="snapshot" id="<%= viewport %>-<%= snap.name %>" data-name="<%= snap.name %>" data-has-baseline="<%= !!snap.baseline %>" data-has-current="<%= !!snap.current %>">
+      <div class="snapshot<%= " snapshot--selector" if entry.selector %>" id="<%= viewport %>-<%= snap.name %>" data-name="<%= snap.name %>" data-has-baseline="<%= !!snap.baseline %>" data-has-current="<%= !!snap.current %>">
         <div class="snapshot-header">
           <h2>
             <%= snap.name.tr("-", " ") %>
diff --git a/templates/snapshots.css b/templates/snapshots.css
index 8a12304..9787c74 100644
--- a/templates/snapshots.css
+++ b/templates/snapshots.css
@@ -259,6 +259,7 @@ body:has(.sidebar) {
   cursor: ew-resize;
   user-select: none;
   position: relative;
+  margin-inline: auto;
 }
 
 .slider-baseline,
@@ -344,7 +345,6 @@ body:has(.sidebar) {
 .toggle-container {
   display: grid;
   position: relative;
-  max-width: 640px;
   margin-inline: auto;
   border-radius: 4px;
   border: 1px solid #333;
@@ -409,6 +409,14 @@ body:has(.sidebar) {
   border-radius: 4px;
 }
 
+/* ── Selector snapshots (component captures at 2x) ── */
+
+.snapshot--selector .slider-container,
+.snapshot--selector .toggle-container,
+.snapshot--selector .single-image {
+  max-width: 640px;
+}
+
 /* ── Lightbox ── */
 
 .lightbox {