From 5329e6040787902cbf67bfc4a1616347565f9074 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Wed, 8 Jul 2026 23:37:47 +0800
Subject: [PATCH] fix(web): fill the editor host so the caret shows in empty
 space
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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  | 23 ++++++++++++++-----
 .../components/MemoEditor/Editor/editor.css   |  8 +++++++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/web/src/components/ColumnGrid/ColumnGrid.tsx b/web/src/components/ColumnGrid/ColumnGrid.tsx
index eb638a0b..0a50e1d4 100644
--- a/web/src/components/ColumnGrid/ColumnGrid.tsx
+++ b/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>
       )}
diff --git a/web/src/components/MemoEditor/Editor/editor.css b/web/src/components/MemoEditor/Editor/editor.css
index 52f1ab89..45a534bc 100644
--- a/web/src/components/MemoEditor/Editor/editor.css
+++ b/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;