desktop layout

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.

src/components/settings/settings-page-shell.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
+import { PageContainer } from "@/components/layout/page-container";
 import { TopNav } from "@/components/navigation/top-nav";
-import { cn } from "@/lib/utils/cn";
 
 export interface SettingsPageShellProps {
   title: string;
@@ -20,7 +20,9 @@ export function SettingsPageShell({ title, children, mainClassName }: SettingsPa
   return (
     <div className="pb-12">
       <TopNav title={title} onBack sticky className="bg-stone" />
-      <main className={cn("mx-auto max-w-2xl px-6 py-6 lg:max-w-4xl", mainClassName)}>{children}</main>
+      <PageContainer size="default" className={mainClassName}>
+        {children}
+      </PageContainer>
     </div>
   );
 }