apps/pwa/src/components/CalendarShell.tsx

@@ -205,7 +205,7 @@ export function CalendarShell() {
         }}
       >
         {/* Main calendar area */}
-        <div style={{ flex: 1, minHeight: 0, position: 'relative', overflow: 'hidden' }}>
+        <div style={{ flex: 1, minHeight: 0, height: '100%', position: 'relative' }}>
           {isInitialLoading ? (
             // Loading state: shimmer skeleton
             <div style={{ padding: 'var(--space-4)', flex: 1 }}>

apps/pwa/src/styles/index.css

@@ -8,6 +8,27 @@
 
 @import './tokens.css';
 
+/* ── Schedule-X calendar sizing ───────────────────────────────────────────── */
+/*
+ * Schedule-X renders .sx__calendar-wrapper (height:100%) inside a <div> that
+ * the React adapter emits without an explicit height.  The parent container in
+ * CalendarShell is a flex item (flex:1; minHeight:0; height:100%) so we must
+ * propagate that height down through the React wrapper element to the
+ * .sx__calendar-wrapper so the week/day time-grid (.sx__view-container) can
+ * scroll correctly.
+ *
+ * Class names confirmed from @schedule-x/theme-default@4.6.0 dist/index.css:
+ *   .sx__calendar-wrapper  – outer wrapper emitted by the React adapter
+ *   .sx__calendar          – inner flex-column container (flex:1; height:100%)
+ *   .sx__view-container    – scrollable time-grid body (flex:1; overflow-y:auto)
+ *
+ * The React adapter wraps everything in a single <div> with no class; we
+ * target it via the .sx__calendar-wrapper descendant relationship.
+ */
+.sx__calendar-wrapper {
+  height: 100%;
+}
+
 /* ── Minimal Global Reset ─────────────────────────────────────────────────── */
 
 *,

apps/pwa/src/styles/tokens.css

@@ -114,10 +114,13 @@
   --sx-color-on-surface: var(--color-text-primary);
   --sx-color-on-surface-variant: var(--color-text-secondary);
   --sx-color-outline: var(--color-border);
-  --sx-color-neutral: var(--color-surface-dim);
-  --sx-color-neutral-variant: var(--color-border-subtle);
+  --sx-color-neutral: var(--color-text-secondary);
+  --sx-color-neutral-variant: var(--color-border);
 
   --sx-font-family: var(--font-family-base);
+
+  /* Ensure internal text color (chevrons, borders) uses our primary text */
+  --sx-internal-color-text: var(--color-text-primary);
 }
 
 /* ─────────────────────────────────────────────────────────────────────────