Back to feed

sledtools/pika branch #42

pika-git-width-1

Widen branch review layout

Target branch: master

Merge Commit: c11762684c8c58b1f5636da8595a0f2f89053a95

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 #53 success

2 passed

head 83b9054be3f1bd4b18ac2a1dee12d3c1eaf22d92 · queued 2026-03-25 16:05:12 · 2 lane(s)

queued 15s · ran 24s

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

Summary

This branch widens the layout container used on the branch review detail page. The previous fixed max-width: 1480px is replaced with a fluid-width rule — width: min(1880px, calc(100vw - 2rem)) — that lets the page expand up to 1880 px while still respecting a 1 rem gutter on each side of the viewport. The change gives reviewers more horizontal space for diffs and metadata panels without sacrificing responsiveness on smaller screens.

Tutorial Steps

Replace fixed max-width with fluid width on `.branch-page`

Intent: Widen the branch review detail page from a hard 1480 px cap to a fluid layout that scales up to 1880 px, keeping a minimum 1 rem horizontal gutter so the content never touches the viewport edges on narrow screens.

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

Evidence 
@@ -20,7 +20,11 @@
 {% endblock %}
 
 {% block styles %}
-      .branch-page { max-width: 1480px; margin: 0 auto; padding: 2rem 1rem 3rem; }
+      .branch-page {
+        width: min(1880px, calc(100vw - 2rem));
+        margin: 0 auto;
+        padding: 2rem 1rem 3rem;
+      }

What changed

The .branch-page container in detail.html previously used a single-line declaration with max-width: 1480px. This has been replaced with a multi-line block that uses the CSS min() function:

.branch-page {
  width: min(1880px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

How it works

Viewport widthResolved widthBehaviour
≥ 1912 px (1880 + 2×1rem)1880 pxCaps at the new maximum; centered via margin: 0 auto.
< 1912 px100vw - 2remFills the viewport minus a 1 rem gutter on each side.

Key differences from the old rule:

  1. width instead of max-width — combined with min(), the element always computes an explicit width rather than relying on block-level flow plus a ceiling. The practical rendering is the same, but the intent is more explicit.
  2. 1480 px → 1880 px — an extra 400 px of horizontal room at large viewports, useful for side-by-side diff views and wide metadata panels.
  3. calc(100vw - 2rem) as a floor — guarantees the container never overflows the viewport, replacing the implicit shrink behaviour of max-width with an explicit calculation.

Why it matters

Branch review pages frequently display diffs, file trees, and discussion panels. The wider cap reduces horizontal scrolling inside diff blocks on large monitors while the min() guard keeps the layout fully responsive on tablets and laptops.

Diff