fix(layout): normalise auth-shell container width on max-w-screen-xl

Pre-v1.4.33 the dashboard shell capped at max-w-[76.8rem] (1228 px)
while settings/admin shells used max-w-screen-xl (1280 px) and the
bugreport route capped at max-w-6xl (1152 px). Route switches between
those surfaces produced a 52-128 px lateral shift on a 1440 px laptop
which the user perceives as the page "wobbling".

- src/components/layout/auth-shell.tsx: max-w-[76.8rem] -> max-w-screen-xl
- src/app/bugreport/page.tsx: drop the inner max-w-6xl cap so the shell
  alone owns the content frame.

Settings/admin shells already use max-w-screen-xl; no change needed.

Refs .planning/round-v1433-audit-polish.md §4.2 + Win 1.
This commit is contained in:
Marc-André Bombeck committed 2026-05-16 17:45:20 +02:00
1 parent 6135c32507
commit 87e4cdcb1b
2 files changed
+12 -3

No files matched your search

+2 -2
View File
@@ -99,7 +99,7 @@ export default function BugReportPage() {
if (!isAuthenticated) {
return (
<div className="mx-auto w-full max-w-6xl space-y-6">
<div className="w-full space-y-6">
<h1 className="text-2xl font-bold tracking-tight">
{t("bugreport.title")}
</h1>
@@ -112,7 +112,7 @@ export default function BugReportPage() {
if (status && status.enabled === false) {
return (
<div className="mx-auto w-full max-w-6xl space-y-6">
<div className="w-full space-y-6">
<div>
<h1 className="text-2xl font-bold tracking-tight">
{t("bugreport.title")}
+10 -1
View File
@@ -154,7 +154,16 @@ export function AuthShell({ children }: { children: React.ReactNode }) {
id="main-content"
className="flex-1 overflow-y-auto pb-[calc(4rem+env(safe-area-inset-bottom,0px))] md:pb-0"
>
<div className="mx-auto max-w-[76.8rem] px-4 py-6 md:px-6">
{/*
v1.4.33 IW9 — container normalised on `max-w-screen-xl`
(1280 px) so dashboard / settings / admin / bugreport all
hit the same content frame. Pre-v1.4.33 the dashboard
shell capped at `max-w-[76.8rem]` (1228 px) while the
settings/admin shells used `max-w-screen-xl`, producing a
52 px lateral wobble on every route switch. Same audit
note in `.planning/round-v1433-audit-polish.md` §4.2.
*/}
<div className="mx-auto max-w-screen-xl px-4 py-6 md:px-6">
{children}
</div>
</main>