Cap center column width app-wide in FundraiserLayout

The layout outlet had no max-width, so pages without their own `max-w-*`
wrapper (e.g. /help, the home feed) stretched edge-to-edge on widescreen
monitors. Add a default `max-w-3xl` cap on the center column and wire
the existing `noMaxWidth` and `wrapperClassName` LayoutOptions through,
so pages that need wider canvases keep working — CampaignsPage,
CampaignDetailPage, CreateCampaignPage, EventDashboardPage, and WorldPage
already opt out via `noMaxWidth: true` or the `fullBleed` preset.
This commit is contained in:
Alex Gleason
2026-05-17 18:10:58 -05:00
parent fe5a622998
commit a1be35f1f2
+16 -3
View File
@@ -9,6 +9,7 @@ import {
LayoutStore,
LayoutStoreContext,
NavHiddenContext,
useLayoutSnapshot,
} from '@/contexts/LayoutContext';
import { cn } from '@/lib/utils';
@@ -23,8 +24,10 @@ import { cn } from '@/lib/utils';
* - We still provide `LayoutStoreContext`, so pages that call
* `useLayoutOptions(...)` keep working. Most options (FAB, sidebars,
* mobile arc) are intentionally ignored here because the new shell has
* no FAB and no sidebars. The store still drives the
* `wrapperClassName` escape hatch for pages that need to widen.
* no FAB and no sidebars. The store drives two width-related escape
* hatches: `wrapperClassName` (extra classes on the center column) and
* `noMaxWidth` (drops the default `max-w-3xl` cap). The `fullBleed`
* preset expands to both, so edge-to-edge pages keep working.
* - `CenterColumnContext` exposes the content `<div>` so legacy components
* (e.g. nsite preview overlay) can still portal into it.
* - `DrawerContext` and `NavHiddenContext` are kept as no-op providers so
@@ -45,6 +48,7 @@ function PageSkeleton() {
function FundraiserLayoutInner() {
const centerColumnRef = useRef<HTMLDivElement>(null);
const [centerColumnEl, setCenterColumnEl] = useState<HTMLElement | null>(null);
const { noMaxWidth, wrapperClassName } = useLayoutSnapshot();
// Mobile drawer is owned by TopNav now, so consumers of `useOpenDrawer`
// become no-ops. Keeping the context shape avoids touching every page that
@@ -64,7 +68,16 @@ function FundraiserLayoutInner() {
centerColumnRef.current = el;
setCenterColumnEl(el);
}}
className={cn('flex-1 min-w-0 w-full')}
className={cn(
'flex-1 min-w-0 w-full mx-auto',
// App-wide cap on the center column so pages like /help
// don't stretch across widescreen monitors. Pages that
// need a wider canvas opt out via `noMaxWidth: true` (or
// the `fullBleed` preset), which expands to `!max-w-none`
// through `wrapperClassName`.
!noMaxWidth && 'max-w-3xl',
wrapperClassName,
)}
>
<Outlet />
</div>