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">
+      <main className="mx-auto max-w-2xl space-y-6 px-6 py-6">
-        One-way sync: {branding.name} stays the source of truth, and your confirmed appointments are pushed to
+        <p className="text-muted text-sm">
-        Google Calendar. Nothing is ever imported back from Google.
+          One-way sync: {branding.name} stays the source of truth, and your confirmed appointments are pushed to
-      </p>
+          Google Calendar. Nothing is ever imported back from Google.
-      <CalendarConnectionPanel
+        </p>
-        configured={configured}
+        <CalendarConnectionPanel
-        initial={
+          configured={configured}
-          connected
+          initial={
-            ? {
+            connected
-                connected: true,
+              ? {
-                accountEmail: connection.accountEmail,
+                  connected: true,
-                selectedCalendarName: connection.selectedCalendarName,
+                  accountEmail: connection.accountEmail,
-                lastSyncAt: connection.lastSyncAt?.toISOString(),
+                  selectedCalendarName: connection.selectedCalendarName,
-                lastSyncError: connection.lastSyncError,
+                  lastSyncAt: connection.lastSyncAt?.toISOString(),
-              }
+                  lastSyncError: connection.lastSyncError,
-            : { connected: false }
+                }
-        }
+              : { connected: false }
-      />
+          }
+        />
+      </main>
     </div>
   );
 }