fix(web): fill the editor host so the caret shows in empty space

The CodeMirror editor only grew to its content height, so in focus mode
(where the host is tall) the empty area below the text was bare host
markup outside the editor. Clicking there could not focus the editor or
place the caret, so it appeared to vanish in "empty" space. Give
.cm-editor height:100% — it collapses to auto in normal (auto-height)
mode and only fills when the host has a definite height.

Fixes #6076

web/src/components/ColumnGrid/ColumnGrid.tsx

@@ -209,6 +209,19 @@ function ColumnGrid<T>({ items, getKey, renderItem, leading, priorityKey, maxCol
       if (!target) continue;
       const firstPlacement = !positionedKeysRef.current.has(key);
       if (firstPlacement) positionedKeysRef.current.add(key);
+      // The leading tile (the note composer) is positioned with left/top rather than a
+      // transform so it never becomes the containing block for its own position:fixed
+      // descendants. A transform (or will-change:transform) here would trap the editor's
+      // focus-mode overlay — which is meant to cover the viewport — inside this column tile.
+      // The leading tile is pinned to column one's top and only shifts horizontally on
+      // resize (which snaps anyway), so it loses no animation by skipping the transform.
+      if (key === LEADING_KEY) {
+        el.style.transition = "none";
+        el.style.transform = "";
+        el.style.left = `${target.x}px`;
+        el.style.top = `${target.y}px`;
+        continue;
+      }
       el.style.transition = animateRepack && !firstPlacement ? "" : "none";
       el.style.transform = `translate3d(${target.x}px, ${target.y}px, 0)`;
     }
@@ -294,12 +307,10 @@ function ColumnGrid<T>({ items, getKey, renderItem, leading, priorityKey, maxCol
   return (
     <div ref={containerRef} className="relative w-full" style={{ height: containerHeight }}>
       {leading != null && (
-        <div
-          key={LEADING_KEY}
-          ref={getItemRef(LEADING_KEY)}
-          className="absolute top-0 left-0 transition-transform duration-200 ease-out motion-reduce:transition-none"
-          style={{ willChange: "transform" }}
-        >
+        // Positioned with left/top (see relayout), and deliberately WITHOUT
+        // transform/will-change so it never establishes a containing block that would trap
+        // the composer's focus-mode overlay inside this tile.
+        <div key={LEADING_KEY} ref={getItemRef(LEADING_KEY)} className="absolute top-0 left-0">
           {leading}
         </div>
       )}

web/src/components/MemoEditor/Editor/editor.css

@@ -12,6 +12,14 @@
   & .cm-editor {
     background: transparent;
     font-size: 1rem;
+    /* Fill the host so the whole visible editor area belongs to CodeMirror.
+       Without this the editor only grows to its content height, and any empty
+       space below the text (notably in focus mode, where the host is tall) is
+       bare host markup — clicking it can't focus the editor or place the caret,
+       so the caret appears to vanish in "empty" space (#6076). height:100%
+       collapses to auto when the host is auto-height (normal mode), so this
+       only fills when the host has a definite height. */
+    height: 100%;
   }
   & .cm-editor.cm-focused {
     outline: none;