Module sidebar: a white panel beside left-aligned content

[ifahimreza]

Fahim, 2026-10-05, on the live CRM and Analytics pages: "how disgusting sidebar look". On the page-grey fixes: "left small sidebar and there no sidebar look bg color it look very big white space". He compared five options in a mockup (https://claude.ai/artifact/MqHubsAeTUzwFjcdKWC2dN) and chose D, sidebar with background, over top tabs (#328).

What was wrong

• The section's tab row was a white band that started at the sidebar's edge, leaving a grey notch.
• The content centred itself in the space after the sidebar, so the gap grew with the screen.
• The "raised" active item, a white box with a ring, read as a text field.
• The divider was shorter than the items.

What changes

• The sidebar is a 220px white panel with a #dcdcde hairline on its right, the full height of the page. It joins the white header and the white tab band.
• The current section takes the page grey #f0f0f1, weight 600, with no ring or shadow. Hover is #f6f7f7 (--s-nav-hover). The divider runs the items' full width.
• The tab row and the content start 40px after the panel, on the left. The module column is 920px (was 880px, centred).
• Phone (below 782px) keeps the sideways-scrolling row; the content padding returns to 16px there.
• admin/DESIGN-ALIGNMENT.md: the palette row, the frame, Navigation and a History entry.

No sibling changes: CRM, Analytics and Rank register the same screens. admin/build/ is not committed.

Checked

• Jest 336 passed, lint:js clean, build OK.
• Built in the saddle checkout that saddle.site runs; Fahim looked at it there before asking for the merge.

Not here

• Analytics' Visitors and Reports draw a card inside a card (their own screens), a follow-up in saddle-analytics.
• Top tabs instead of the module sidebar #328 (top tabs) is superseded by this PR.

🤖 Generated with Claude Code

---

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}