Skip to content

Give every admin page consistent padding and contain page crashes - #97

Merged
man4ish merged 1 commit into
mainfrom
claude/admin-layout-padding
Sep 26, 2026
Merged

man4ish merged 1 commit into
mainfrom
claude/admin-layout-padding

Conversation

@man4ish

@man4ish man4ish commented Sep 26, 2026

Copy link
Copy Markdown
Collaborator

Why

Admin pages rendered straight into the shell with no padding:

  • Flush layout: every title, description and card sat against the sidebar, directly under the top bar, and ran to the right edge of the window. Measured on a local build, every page title was 0px from the sidebar and 0px from the top bar.
  • Misaligned placeholders: only the "Coming soon" placeholder used PageContainer, which centered it in a 1280px box, so those pages were aligned differently from everything else.
  • Crashes blank the console: a single page render error blanked the whole console, sidebar and top bar included, until a reload.

What

  • AppShell: wraps every page in <main className="shell-content"> with 24px/32px padding, full width and left-aligned. The existing 560px rule still drops the padding to 16px on phones.
  • PageContainer: no longer adds padding or centering, so nothing is padded twice and the placeholders line up with every other page.
  • PageErrorBoundary (new, keyed by the active page): a render error now shows an in-page error with a Retry button, and the sidebar and top bar keep working.
  • Search box: the disabled "Search (coming soon)" box is hidden below 1700px, where it squeezed the breadcrumb to "Administrat… › Us…".

Checks

  • Every sidebar page, local admin build:
    • 1600px: titles sit 32px from the sidebar and 24px below the top bar.
    • 1280px: no horizontal overflow.
  • New tests: the shell pads pages in one place and doesn't center them; a crashing page keeps the shell and can retry.
  • Results: vitest 748 passed; tsc -b, build:admin and build:control are clean.

🤖 Generated with Claude Code

https://claude.ai/code/session_014t7uDmnjGZAyMrCYpN2RZy


Generated by Claude Code

Admin pages rendered straight into the shell's scroll area with no
padding, so every page title, description and card sat flush against
the sidebar, directly under the top bar, and ran to the right edge of
the window. Only the "Coming soon" placeholder used PageContainer,
which centered it in a 1280px box, so those pages were aligned
differently from the rest.

- AppShell wraps every page in <main className="shell-content"> with
  24px/32px padding, full width and left-aligned. The existing 560px
  rule still drops it to 16px on phones.
- PageContainer no longer adds its own padding or centering, so
  nothing is padded twice and the placeholders line up with every
  other page.
- New PageErrorBoundary, keyed by the active page: a render error now
  shows an error with Retry inside the page instead of blanking the
  whole console (sidebar and top bar included) until a reload.
- Hide the disabled "Search (coming soon)" box below 1700px, where it
  squeezed the breadcrumb to "Administrat... > Us...".

Checked every sidebar page against a local admin build at 1600px and
1280px: titles now sit 32px from the sidebar and 24px below the top
bar, and no page overflows horizontally.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014t7uDmnjGZAyMrCYpN2RZy
@man4ish
man4ish merged commit 96a7f6c into main Sep 26, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants