3cfdab25c3
Operator feedback 2026-06-04: - "pull out the left nav to make it look like it is its own floating section versus attached to the top-left" - "this is also true for the header for the pages" - "the divider that runs between the right side and the sidebar. let's make that divider go away so it all feels like one large page" Changes: components/Layout.js - Outer flex shell: `md:p-4 md:gap-4` pulls the sidebar AND the main column in from the viewport edges on desktop. Mobile (< 768px) is unaffected because the sidebar is `hidden md:flex` already and the TopSearchBar / page content still run flush there. - Desktop sidebar: `md:rounded-3xl md:overflow-hidden` so the rail reads as a floating chip. Dropped `var(--rim-light-outer)` from its box-shadow stack — that 1px outer ring was literally the "vertical divider between the sidebar and the right side" the operator wanted gone. Chip edges are now defined by `var(--elevation-ambient)` (drop shadow) + the glass-surface-mid tint against the body gradient that shows through `md:gap-4`. - Main column: added `md:gap-4 min-w-0`. The gap separates the floating TopSearchBar from the page content vertically so they read as two distinct floating chrome elements; min-w-0 prevents long card titles / table cells from blowing past the column width. components/ui/TopSearchBar.js - `md:rounded-2xl` so the header reads as a floating chip on desktop. Mobile stays square (header is edge-to-edge there). - Box-shadow: `rim-light-inner` + `elevation-ambient`. Deliberately no `rim-light-outer` — the prior "remove the divider" feedback applies to any visible 1px edge, and a hairline outer ring would re-introduce one on mobile where the bar abuts content directly. Tests: - npm run test:run: 113/113 - npm run lint: clean - npm run build: green Co-authored-by: Cursor <cursoragent@cursor.com> |
||
|---|---|---|
| .. | ||
| Button.js | ||
| CommandPaletteModal.js | ||
| GlassSurface.js | ||
| index.js | ||
| Input.js | ||
| Modal.js | ||
| SearchBar.js | ||
| StatCard.js | ||
| TopSearchBar.js | ||