Skip to content

feat(ui): cap page columns at 1536px, left-aligned, on one page edge - #2574

Merged
Makisuo merged 2 commits into
mainfrom
feat/page-layout-edge
Nov 13, 2026
Merged

Makisuo merged 2 commits into
mainfrom
feat/page-layout-edge

fix(ui): keep the page gutter at 16px

fd31eb9
Select commit
Loading
Failed to load commit list.
Maple Review Bot / Maple / review succeeded Nov 13, 2026 in 2m 2s

Confidence 10/10 · No issues found

🟢 Confidence 10/10 · safe to merge. The gutter resolves to the same 16px the base padding already gave, so only the 1536px cap and the hairline change width or paint.
no findings · tests not needed · risk medium

Moves the page edge to a --page-gutter variable, caps the default column at 1536px left-aligned, and swaps the scrolled header's shadow for a hairline. Geometry matches the base at every breakpoint, so it is safe to merge.

  • --page-gutter on the page root pads the top bar, sticky area, rail and scroll area
  • dashboardPage defaults to a left-aligned 1536px wide column; reading is removed
  • The scrolled sticky area draws border-border-subtle instead of shadow-popup
  • Traces list/detail, service map, dashboard view, widget editor and metric detail pass width: "full"

Fixed since the last review

  • ✅ F1 · Filter rail keeps px-4, so at lg it sits 8px left of the top bar
What was checked
  • --page-gutter is set on pageLayoutStyles, and shell/view.ts:191 wraps the top bar in that root, so px-(--page-gutter) resolves
  • Gutter is 16px at every breakpoint and the rail keeps px-4 (page-layout.styles.ts:2,32), which is F1's 8px gap gone
  • --breakpoint-2xl needs no local declaration: apps/web/src/theme.css imports stock tailwindcss and no CSS file overrides breakpoints

fd31eb9 · Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.