Element-scoped snapshots are smaller than full-page ones,
so the diff and gallery views now cap images at natural size
instead of stretching them.

Assisted-by: Claude Opus 4.6 via Claude Code

diff --git a/lib/ketchup/snapshots.rb b/lib/ketchup/snapshots.rb
index bd2c2c6..24243dd 100644
--- a/lib/ketchup/snapshots.rb
+++ b/lib/ketchup/snapshots.rb
@@ -48,14 +48,19 @@ module Ketchup
           wait_for(".home")
         end
 
-        # Create a series through the UI
+        # New series form filled with markdown, before creating
         goto @base
         wait_for("#new-series-form")
-        fill_new_series(note: "Call Mom", interval_count: 2, interval_unit: "week")
+        fill_new_series(
+          note: "Call Mom\n\nAsk about *weekend plans*\n- Bring **birthday cake**\n- Check flight times",
+          interval_count: 2,
+          interval_unit: "week"
+        )
+        snap("new-series-editing", selector: ".column-aside")
+
+        # Submit and capture series detail
         @browser.at_css("#create-series-btn").click
         wait_for("#series-note-detail")
-
-        # Series detail after creation (redirects to detail page)
         snap("series-detail")
 
         # Create more series for a populated dashboard
@@ -155,7 +160,8 @@ module Ketchup
       def fill_new_series(note:, interval_count: 1, interval_unit: "day")
         textarea = @browser.at_css("#series-note-editor textarea")
         textarea.focus
-        textarea.type(note)
+        textarea.evaluate("this.value = #{note.to_json}")
+        textarea.evaluate('this.dispatchEvent(new Event("input", { bubbles: true }))')
 
         count_input = @browser.at_css("input[name='interval_count']")
         count_input.focus
diff --git a/templates/snapshots.css b/templates/snapshots.css
index a21d230..a8b2911 100644
--- a/templates/snapshots.css
+++ b/templates/snapshots.css
@@ -10,7 +10,7 @@ h1 { margin-bottom: var(--space-l); color: #fff; }
 
 .snapshot { margin-bottom: var(--space-xl); }
 .snapshot h2 { margin-bottom: var(--space-s); color: #ccc; }
-.snapshot img { max-width: 100%; border: 1px solid #333; border-radius: 4px; }
+.snapshot img { max-width: 100%; border: 1px solid #333; border-radius: 4px; display: block; margin-inline: auto; }
 
 /* Diff-specific */
 
@@ -21,6 +21,6 @@ h1 { margin-bottom: var(--space-l); color: #fff; }
 .pair { display: flex; gap: var(--space-s); }
 .side { flex: 1; min-width: 0; }
 .side h3 { margin-bottom: var(--space-xs); color: #999; font-size: var(--step--1); text-transform: uppercase; }
-.side img { width: 100%; border: 1px solid #333; border-radius: 4px; }
+.side img { max-width: 100%; border: 1px solid #333; border-radius: 4px; display: block; margin-inline: auto; }
 
 .placeholder { padding: var(--space-xl); text-align: center; color: #666; border: 1px dashed #333; border-radius: 4px; }