diff --git a/apps/pwa/src/components/CalendarShell.tsx b/apps/pwa/src/components/CalendarShell.tsx
index 8e1d6d1..1d58635 100644
--- a/apps/pwa/src/components/CalendarShell.tsx
+++ b/apps/pwa/src/components/CalendarShell.tsx
@@ -236,9 +236,15 @@ export function CalendarShell() {
// ── Calendar content ───────────────────────────────────────────────────────
- // The content panel (right of sidebar on desktop, full-width on phone)
- function CalendarContent() {
- return (
+ // The content panel (right of sidebar on desktop, full-width on phone).
+ //
+ // This is a plain JSX value, NOT a nested `function CalendarContent()` rendered
+ // as ``. A component defined inside render has a new identity
+ // every render, so React unmounts+remounts its entire subtree — including
+ // — on ANY CalendarShell re-render (popup/form close, post-
+ // write events refetch). That full remount is the "calendar flash" (Bug B). As
+ // an element value it reconciles in place across re-renders: no remount, no flash.
+ const calendarContent = (
)}
- )
- }
+ )
// ── Full layout ────────────────────────────────────────────────────────────
@@ -355,7 +360,7 @@ export function CalendarShell() {
currentUserName={meQuery.data?.user.displayName ?? undefined}
/>
-
+ {calendarContent}
{/* New Event FAB — phone: bottom-right floating action button (UI-SPEC §Interaction Contract) */}
@@ -457,7 +462,7 @@ export function CalendarShell() {
-
+ {calendarContent}
{/* EventDetailPopover — standalone mode driven by Zustand openEventId */}