Stefan Lazic
8c267eff25
CI / ci (push) Canceled after 0s
The shell around every page sets no content width, so each page chose its own. Business Details was centered, Services and Team were pinned left with a dead right half, and Reports, the dashboard, Current Appointment and Settings stretched edge to edge. I added a shared PageContainer with three widths (narrow, default, wide), always centered, and used it on those pages and on the settings pages. Two form layouts had their own bugs: Business Details (your screenshot): six cards in a two-column grid, so a short card next to a tall one left a big gap. It's now two independent columns of similar height. Loyalty: "Reward Rules" and "Rules & Expiry" each sat alone in the left column with an empty right side. They're now side by side. On phones, Business Details now stacks its cards in a slightly different order (Branding moves down). Tablets get a slightly wider column than before. Two things I didn't touch: Customer pages: Home and Book are a phone-width column floating in the middle of a desktop screen, with the bottom tab bar still showing. That's a bigger design decision, so tell me if you want it. Narrow pages: about 30 pages already used a centered narrow column, which looks fine.
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { PageContainer } from "@/components/layout/page-container";
|
|
import { TopNav } from "@/components/navigation/top-nav";
|
|
|
|
export interface SettingsPageShellProps {
|
|
title: string;
|
|
children: ReactNode;
|
|
/** Merged onto the default `<main>` classes via cn()/tailwind-merge — pass e.g. "lg:max-w-2xl" to opt out of the default wide desktop layout, or extra utilities like "space-y-8". */
|
|
mainClassName?: string;
|
|
}
|
|
|
|
/**
|
|
* The TopNav + centered container wrapper repeated verbatim across every
|
|
* owner settings page (Business Details, Gallery, Loyalty, Booking
|
|
* Rules, Opening Hours, Reviews, ...) — extracted here in Phase 9 once
|
|
* enough pages shared it to be worth the indirection. See
|
|
* docs/phase-9-summary.md, "Architecture Review".
|
|
*/
|
|
export function SettingsPageShell({ title, children, mainClassName }: SettingsPageShellProps) {
|
|
return (
|
|
<div className="pb-12">
|
|
<TopNav title={title} onBack sticky className="bg-stone" />
|
|
<PageContainer size="default" className={mainClassName}>
|
|
{children}
|
|
</PageContainer>
|
|
</div>
|
|
);
|
|
}
|