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
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 {