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/app/(owner)/owner/page.tsx

@@ -23,6 +23,7 @@ import {
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
 import { Card } from "@/components/ui/card";
+import { PageContainer } from "@/components/layout/page-container";
 import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { hasPermission, isSuperAdmin } from "@/lib/auth/permissions";
@@ -135,7 +136,7 @@ export default async function OwnerDashboardPage() {
         leftAction={<InlineNotificationBell href="/owner/notifications" unreadCount={unreadNotificationCount} />}
       />
 
-      <div className="space-y-6 px-6 pt-6">
+      <PageContainer as="div" size="wide" className="space-y-6 pb-0">
         <p className="text-muted text-sm">{context.businessName} — today&apos;s overview</p>
 
         {summary.warnings.length > 0 && (
@@ -250,7 +251,7 @@ export default async function OwnerDashboardPage() {
             <ManageSection key={section.title} {...section} />
           ))}
         </div>
-      </div>
+      </PageContainer>
     </div>
   );
 }

src/app/(owner)/owner/reports/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
 import { Card } from "@/components/ui/card";
+import { PageContainer } from "@/components/layout/page-container";
 import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { hasPermission } from "@/lib/auth/permissions";
@@ -73,7 +74,7 @@ export default async function OwnerReportsPage({
   return (
     <div className="pb-12">
       <TopNav title="Reports" onBack sticky className="bg-stone" />
-      <main className="space-y-6 px-6 py-6">
+      <PageContainer size="wide" className="space-y-6">
         <p className="text-muted text-sm">
           {fromDate} to {toDate}
         </p>
@@ -196,7 +197,7 @@ export default async function OwnerReportsPage({
             </Card>
           )}
         </section>
-      </main>
+      </PageContainer>
     </div>
   );
 }

src/app/(owner)/owner/services/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
+import { PageContainer } from "@/components/layout/page-container";
 import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { hasPermission } from "@/lib/auth/permissions";
@@ -27,7 +28,7 @@ export default async function OwnerServicesPage() {
   return (
     <div className="pb-12">
       <TopNav title="Services" onBack sticky className="bg-stone" />
-      <main className="px-6 py-6 lg:max-w-3xl">
+      <PageContainer>
         <CatalogueManager
           categories={categories.map((c) => ({
             id: c.id,
@@ -48,7 +49,7 @@ export default async function OwnerServicesPage() {
             })),
           }))}
         />
-      </main>
+      </PageContainer>
     </div>
   );
 }

src/app/(owner)/owner/team/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { Plus, Search, ShieldCheck, ShieldPlus } from "lucide-react";
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
+import { PageContainer } from "@/components/layout/page-container";
 import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { hasPermission } from "@/lib/auth/permissions";
@@ -54,7 +55,7 @@ export default async function OwnerTeamPage({
   return (
     <div className="pb-12">
       <TopNav title="Team" onBack sticky className="bg-stone" action={headerAction} />
-      <main className="px-6 py-6 lg:max-w-4xl">
+      <PageContainer>
         <form action="/owner/team" method="GET" className="relative mb-4">
           <Search className="text-muted absolute top-1/2 left-4 h-4 w-4 -translate-y-1/2" aria-hidden="true" />
           <label htmlFor="team-search" className="sr-only">
@@ -106,7 +107,7 @@ export default async function OwnerTeamPage({
             ))
           )}
         </div>
-      </main>
+      </PageContainer>
     </div>
   );
 }