improve rendering raw

frontend/src/hooks/useResizeHeight.ts

@@ -3,8 +3,13 @@ import { useEffect, useRef, useState } from 'react'
 /**
  * Returns the height of the observed element, updating when it resizes (e.g. node resize).
  * Used to give CodeMirror and other components an explicit height that tracks their container.
+ * @param defaultHeight - Height used until the element is measured.
+ * @param deps - Optional dependency array; when the ref is attached to a conditionally mounted element, pass deps (e.g. [viewMode]) so the effect re-runs when the element appears.
  */
-export function useResizeHeight(defaultHeight: number): [number, React.RefObject<HTMLDivElement | null>] {
+export function useResizeHeight(
+    defaultHeight: number,
+    deps?: React.DependencyList
+): [number, React.RefObject<HTMLDivElement | null>] {
     const ref = useRef<HTMLDivElement | null>(null)
     const [height, setHeight] = useState(defaultHeight)
 
@@ -21,7 +26,7 @@ export function useResizeHeight(defaultHeight: number): [number, React.RefObject
         ro.observe(el)
         setHeight(el.getBoundingClientRect().height)
         return () => ro.disconnect()
-    }, [])
+    }, deps ?? [])
 
     return [height, ref]
 }