useIsMobile reads the width on the first render, so a phone's flow nodes no longer draw desktop handles first and React Flow cannot measure those: the Music and House history edges stop changing between loads

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WgBfkm4rCmtd1T4vHWjEPx

frontend/src/hooks/useMobile.ts

@@ -3,7 +3,13 @@ import * as React from "react"
 const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  // Read on the first render, not after it: a node on the flow canvas draws
+  // its handles for the direction this returns, and React Flow measures them
+  // once. Starting at `false` drew them for a desktop first, so whether an
+  // edge met its handle depended on which of the two React measured.
+  const [isMobile, setIsMobile] = React.useState(
+    () => window.innerWidth < MOBILE_BREAKPOINT,
+  )
 
   React.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
@@ -15,5 +21,5 @@ export function useIsMobile() {
     return () => mql.removeEventListener("change", onChange)
   }, [])
 
-  return !!isMobile
+  return isMobile
 }