Back to feed

sledtools/pika branch #44

pika-git-width-2

Expand branch diff viewport

Target branch: master

Merge Commit: f4286c79d77f18088dcdf65c05206c11b1d8e33b

branch: merged tutorial: ready ci: success
Open CI Details

Continuous Integration

CI: success

Compact status on the review page, with full logs on the CI page.

Open CI Details

Latest run #55 success

2 passed

head d2c5125e0e45deb68432e5845c5a318d89a763eb · queued 2026-03-25 16:12:21 · 2 lane(s)

queued 13s · ran 24s

check-notifications · success check-agent-contracts · success

Summary

This branch widens the viewport used when viewing branch diffs in the Pika News detail page. The maximum container width increases from 1880px to 2200px with tighter horizontal padding, and the diff table itself now enforces a generous minimum width so that side-by-side diffs no longer collapse on wide monitors. Together these changes let reviewers see more code context without horizontal scrolling.

Tutorial Steps

Widen the branch-page container

Intent: Give the overall detail page more horizontal room so wide diffs are not unnecessarily constrained by the outer wrapper.

Affected files: crates/pika-news/templates/detail.html

Evidence 
@@ -21,9 +21,10 @@
       .branch-page {
-        width: min(1880px, calc(100vw - 2rem));
+        width: min(2200px, calc(100vw - 1rem));
+        max-width: none;
         margin: 0 auto;
-        padding: 2rem 1rem 3rem;
+        padding: 2rem 0.5rem 3rem;
       }

Three coordinated tweaks expand the .branch-page container:

  1. Max width raised – min(1880px, …) → min(2200px, …) adds 320 px of usable space on large displays.
  2. Viewport calc loosened – The fallback expression changes from calc(100vw - 2rem) to calc(100vw - 1rem), clawing back another 1 rem on smaller screens.
  3. max-width: none added – Prevents any inherited or future max-width rule from quietly re-constraining the container.
  4. Horizontal padding reduced – Side padding drops from 1rem to 0.5rem, squeezing out a bit more room for the diff content inside the container.

The net effect is that the page can now stretch nearly edge-to-edge on ultra-wide monitors while still centering nicely via margin: 0 auto.

Enforce a minimum width on the diff table

Intent: Ensure the diff2html table and its file wrapper never shrink below a comfortable reading width, preventing column collapse in side-by-side view.

Affected files: crates/pika-news/templates/detail.html

Evidence 
@@ -202,7 +203,14 @@
-      .d2h-wrapper { border-radius: 12px; overflow-x: auto; }
+      .d2h-wrapper {
+        border-radius: 12px;
+        overflow-x: auto;
+      }
+      .d2h-file-wrapper,
+      .d2h-diff-table {
+        min-width: min(1800px, calc(100vw - 4rem));
+      }

The existing .d2h-wrapper rule is reformatted into a multi-line block (no behavioral change) and a new rule is introduced for .d2h-file-wrapper and .d2h-diff-table:

.d2h-file-wrapper,
.d2h-diff-table {
  min-width: min(1800px, calc(100vw - 4rem));
}

Key points:

  • min-width with min() means the table will be at least 1800 px wide when the viewport permits, but gracefully falls back to 100vw - 4rem on narrower screens.
  • Because the parent .d2h-wrapper already has overflow-x: auto, any content wider than the visible area remains scrollable rather than breaking the layout.
  • This directly complements Step 1: the wider container provides the space, and this rule ensures the diff table actually uses it instead of auto-sizing to a narrower intrinsic width.

Diff