Update page.tsx

src/app/(staff)/staff/settings/calendar/page.tsx

@@ -24,26 +24,28 @@ export default async function StaffCalendarSettingsPage() {
   const configured = !!process.env.GOOGLE_CALENDAR_CLIENT_ID && !!process.env.GOOGLE_CALENDAR_CLIENT_SECRET;
 
   return (
-    <div className="space-y-6 px-6 pt-12 pb-12">
+    <div className="pb-12">
       <TopNav title="Google Calendar" onBack sticky className="bg-stone" />
-      <p className="text-muted text-sm">
-        One-way sync: {branding.name} stays the source of truth, and your confirmed appointments are pushed to
-        Google Calendar. Nothing is ever imported back from Google.
-      </p>
-      <CalendarConnectionPanel
-        configured={configured}
-        initial={
-          connected
-            ? {
-                connected: true,
-                accountEmail: connection.accountEmail,
-                selectedCalendarName: connection.selectedCalendarName,
-                lastSyncAt: connection.lastSyncAt?.toISOString(),
-                lastSyncError: connection.lastSyncError,
-              }
-            : { connected: false }
-        }
-      />
+      <main className="mx-auto max-w-2xl space-y-6 px-6 py-6">
+        <p className="text-muted text-sm">
+          One-way sync: {branding.name} stays the source of truth, and your confirmed appointments are pushed to
+          Google Calendar. Nothing is ever imported back from Google.
+        </p>
+        <CalendarConnectionPanel
+          configured={configured}
+          initial={
+            connected
+              ? {
+                  connected: true,
+                  accountEmail: connection.accountEmail,
+                  selectedCalendarName: connection.selectedCalendarName,
+                  lastSyncAt: connection.lastSyncAt?.toISOString(),
+                  lastSyncError: connection.lastSyncError,
+                }
+              : { connected: false }
+          }
+        />
+      </main>
     </div>
   );
 }