Replace static editor bottom padding with dynamic scroll-past-end

Remove the fixed 70dvh bottom padding and replace it with a
CodeMirror extension that progressively adds a spacer element as
content grows. Padding starts at 30% viewport fill and caps at 70%.
The editor now fills the full visible area via a flex chain, and
clicking the spacer places the cursor at end of document.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ChristianChiarulli

app/src/features/editor/extensions/scroll-past-end.ts

@@ -0,0 +1,120 @@
+import { EditorSelection } from "@codemirror/state";
+import {
+  EditorView,
+  type PluginValue,
+  ViewPlugin,
+  type ViewUpdate,
+} from "@codemirror/view";
+
+import { findEditorScrollContainer } from "@/features/editor/lib/view-utils";
+
+type ScrollPastEndOptions = {
+  /** Content-to-viewport ratio at which padding begins (default: 0.5 = 50%). */
+  startRatio?: number;
+  /** Step size: padding increases every this fraction of growth (default: 0.05 = 5%). */
+  step?: number;
+  /** Maximum padding as a fraction of viewport height (default: 0.7 = 70%). */
+  maxPaddingRatio?: number;
+};
+
+class ScrollPastEndPlugin implements PluginValue {
+  private currentHeight = 0;
+  private spacer: HTMLDivElement | null = null;
+
+  constructor(
+    private readonly view: EditorView,
+    private readonly startRatio: number,
+    private readonly step: number,
+    private readonly maxPaddingRatio: number,
+  ) {
+    this.measure();
+  }
+
+  update(update: ViewUpdate): void {
+    if (update.geometryChanged || update.docChanged) {
+      this.measure();
+    }
+  }
+
+  private ensureSpacer(): HTMLDivElement | null {
+    if (this.spacer) {
+      return this.spacer;
+    }
+
+    const scrollContainer = findEditorScrollContainer(this.view);
+    if (!scrollContainer) {
+      return null;
+    }
+
+    this.spacer = document.createElement("div");
+    this.spacer.setAttribute("aria-hidden", "true");
+    this.spacer.style.cursor = "text";
+    this.spacer.addEventListener("mousedown", this.handleSpacerClick);
+    scrollContainer.append(this.spacer);
+    return this.spacer;
+  }
+
+  private measure(): void {
+    const scrollContainer = findEditorScrollContainer(this.view);
+    if (!scrollContainer) {
+      return;
+    }
+
+    const viewportHeight = scrollContainer.clientHeight;
+    if (viewportHeight === 0) {
+      return;
+    }
+
+    const contentHeight = this.view.contentHeight;
+    const ratio = contentHeight / viewportHeight;
+
+    let height = 0;
+    if (ratio > this.startRatio) {
+      const excess = ratio - this.startRatio;
+      const steps = Math.floor(excess / this.step);
+      const maxHeight = viewportHeight * this.maxPaddingRatio;
+      height = Math.min(steps * (maxHeight / 20), maxHeight);
+    }
+
+    if (height !== this.currentHeight) {
+      this.currentHeight = height;
+      if (height > 0) {
+        const spacer = this.ensureSpacer();
+        if (spacer) {
+          spacer.style.height = `${height}px`;
+        }
+      } else if (this.spacer) {
+        this.spacer.style.height = "0";
+      }
+    }
+  }
+
+  private handleSpacerClick = (event: MouseEvent): void => {
+    event.preventDefault();
+    this.view.dispatch({
+      selection: EditorSelection.cursor(this.view.state.doc.length),
+      scrollIntoView: false,
+    });
+    this.view.focus();
+  };
+
+  destroy(): void {
+    this.spacer?.removeEventListener("mousedown", this.handleSpacerClick);
+    this.spacer?.remove();
+    this.spacer = null;
+  }
+}
+
+export function scrollPastEnd({
+  startRatio = 0.3,
+  step = 0.05,
+  maxPaddingRatio = 0.7,
+}: ScrollPastEndOptions = {}) {
+  return ViewPlugin.fromClass(
+    class extends ScrollPastEndPlugin {
+      constructor(view: EditorView) {
+        super(view, startRatio, step, maxPaddingRatio);
+      }
+    },
+  );
+}

app/src/features/editor/lib/note-editor-config.ts

@@ -57,21 +57,28 @@ export const MARKDOWN_HIGHLIGHT_STYLE = HighlightStyle.define([
 
 export const MARKDOWN_EDITOR_THEME = EditorView.theme({
   "&": {
-    minHeight: "100%",
+    flex: "1",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "0",
     background: "transparent",
     cursor: "text",
   },
   "&.cm-focused": {
     outline: "none",
   },
   ".cm-scroller": {
-    minHeight: "100%",
+    flex: "1",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "0",
     overflow: "visible",
     fontFamily: '"Figtree Variable", sans-serif',
     cursor: "text",
   },
   ".cm-content": {
-    minHeight: "100%",
+    flex: "1",
+    minHeight: "0",
     color: "var(--editor-text)",
     caretColor: "var(--editor-caret)",
     cursor: "text",

app/src/features/editor/note-editor.tsx

@@ -72,6 +72,7 @@ import { dropImage } from "@/features/editor/extensions/drop-image";
 import { pasteImage } from "@/features/editor/extensions/paste-image";
 import { pasteLink } from "@/features/editor/extensions/paste-link";
 import { scrollCenterOnEnter } from "@/features/editor/extensions/scroll-center-on-enter";
+import { scrollPastEnd } from "@/features/editor/extensions/scroll-past-end";
 import { deleteTableBackward } from "@/features/editor/extensions/tables/delete-table-boundary";
 import {
   getHorizontalRuleSelection,
@@ -442,6 +443,7 @@ export const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           drawSelection(),
           EditorView.lineWrapping,
           scrollCenterOnEnter({ viewportPercentage: 5 }),
+          scrollPastEnd(),
           markdownLanguage({
             base: markdownLang,
             extensions: [
@@ -809,7 +811,7 @@ export const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
       <>
         <div
           className={cn(
-            "comet-editor-shell relative flex min-h-full w-full flex-1",
+            "comet-editor-shell relative flex min-h-full w-full flex-1 flex-col",
             searchHighlightAllMatchesYellow &&
               "comet-codemirror-passive-search",
             searchQuery &&
@@ -819,7 +821,7 @@ export const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
         >
           <div className="comet-editor-column">
             <div
-              className="comet-codemirror-host min-h-full flex-1"
+              className="comet-codemirror-host flex min-h-0 flex-1 flex-col"
               ref={containerRef}
             />
           </div>

app/src/index.css

@@ -30,7 +30,6 @@ body {
 
 :root {
   --radius: 0.5rem;
-  --editor-bottom-padding: 70dvh;
 }
 
 @theme inline {
@@ -121,12 +120,13 @@ body {
 
 .comet-editor-column {
   flex: 1;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   position: relative;
   box-sizing: border-box;
-  padding-bottom: var(--editor-bottom-padding);
 }
 
 .comet-editor-column::before {