fix(app): keep document status outside editor content

packages/app/src/App.test.tsx

@@ -1246,20 +1246,27 @@ describe("Markra workspace", () => {
     expect(container.querySelector(".quiet-status")).not.toHaveTextContent("75 words");
   });
 
-  it("keeps the active writing surface clear of the quiet status line", async () => {
+  it("reserves a separate row for document status instead of overlaying the writing surface", async () => {
     const { container } = renderApp();
 
     await expectVisibleMarkdownText("Welcome to Markra");
-    await waitFor(() => {
-      expect(container.querySelector(".markdown-paper")?.getAttribute("style")).toContain("padding-bottom: 56px");
-    });
+    const visualStatus = container.querySelector(".quiet-status");
+    const visualPaper = container.querySelector(".markdown-paper");
+    const visualScroll = visualPaper?.parentElement;
+
+    expect(visualStatus).not.toHaveClass("absolute");
+    expect(visualStatus?.parentElement).toHaveClass("grid", "grid-rows-[minmax(0,1fr)_auto]");
+    expect(visualPaper).toHaveStyle({ paddingBottom: 0 });
+    expect(visualScroll).not.toHaveClass("h-full");
+    expect(visualScroll?.parentElement).toHaveClass("overflow-hidden");
 
     await selectEditorViewMode("Source code");
     await waitFor(() => {
-      expect(container.querySelector(".markdown-source-paper")?.getAttribute("style")).toContain(
-        "padding-bottom: 56px"
-      );
+      expect(container.querySelector(".markdown-source-paper")).toHaveStyle({ paddingBottom: 0 });
     });
+    const sourceScroll = container.querySelector(".markdown-source-paper")?.parentElement;
+    expect(sourceScroll).not.toHaveClass("h-full");
+    expect(sourceScroll?.parentElement).toHaveClass("overflow-hidden");
   });
 
   it("restores a selected history version into the current document", async () => {
@@ -4851,6 +4858,12 @@ describe("Markra workspace", () => {
     expect(mainStatus).toHaveTextContent("saved");
     expect(sideStatus).toHaveTextContent("3 words");
     expect(sideStatus).toHaveTextContent("saved");
+    expect(mainStatus).not.toHaveClass("absolute");
+    expect(sideStatus).not.toHaveClass("absolute");
+    expect(mainPane).toHaveClass("grid", "grid-rows-[minmax(0,1fr)_auto]");
+    expect(sidePane).toHaveClass("grid", "grid-rows-[minmax(0,1fr)_auto]");
+    expect(mainPane.querySelector(".paper-scroll")).not.toHaveClass("h-full");
+    expect(sidePane.querySelector(".paper-scroll")).not.toHaveClass("h-full");
   });
 
   it("keeps native plain text paste targeted at a blurred side editor", async () => {

packages/app/src/App.tsx

@@ -266,14 +266,13 @@ const sideDocumentPaneKeyboardStepPercent = 5;
 const sideDocumentMainPanePercentMin = 35;
 const sideDocumentMainPanePercentMax = 70;
 const defaultSideDocumentMainPanePercent = 50;
-const quietStatusOverlayInset = 56;
 
 function persistSideDocumentGroup(group: StoredWorkspaceSideBySideGroup | null) {
   saveStoredWorkspaceState({ sideBySideGroup: group }).catch(() => {});
 }
 
 function editorBottomOverlayInset(aiCommandActive: boolean, aiCommandInset: number) {
-  return Math.max(quietStatusOverlayInset, aiCommandActive ? aiCommandInset : 0);
+  return aiCommandActive ? aiCommandInset : 0;
 }
 
 function nativeFileOperationFailureDescription(error: unknown) {
@@ -4573,7 +4572,7 @@ function WorkspaceApp() {
           <div
             key={tab.id}
             aria-hidden={visualHidden ? "true" : undefined}
-            className="h-full min-h-0"
+            className="h-full min-h-0 overflow-hidden"
             hidden={visualHidden}
           >
             <MarkdownPaper
@@ -4995,7 +4994,7 @@ function WorkspaceApp() {
                   style={sideDocumentOpen ? sideDocumentSurfaceStyle : undefined}
                 >
                   <div
-                    className="relative h-full min-h-0 overflow-hidden"
+                    className="relative grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] overflow-hidden"
                     ref={mainDocumentPaneRef}
                     onFocusCapture={handleMainDocumentPaneFocus}
                   >
@@ -5064,7 +5063,7 @@ function WorkspaceApp() {
                       </div>
                     </div>
                   ) : (
-                    <div className="relative h-full min-h-0">
+                    <div className="relative h-full min-h-0 overflow-hidden">
                       {mainVisualEditors}
                       {sourceMode ? (
                         <LazyMarkdownSourceEditor
@@ -5135,7 +5134,6 @@ function WorkspaceApp() {
                         <span className="pointer-events-none absolute top-10 bottom-5 left-1/2 w-px -translate-x-1/2 bg-(--border-default) transition-colors duration-150 ease-out group-hover/side-resizer:bg-(--accent) group-focus/side-resizer:bg-(--accent)" />
                       </div>
                       <SideDocumentPane
-                        bottomOverlayInset={viewModeChrome.statusBar ? quietStatusOverlayInset : 0}
                         bodyFontSize={editorPreferences.preferences.bodyFontSize}
                         content={sideDocumentTab.content}
                         contentWidth={activeEditorContentWidth}

packages/app/src/components/LazyMarkdownSourceEditor.tsx

@@ -102,7 +102,7 @@ function MarkdownSourceEditorFallback({
   return (
     <section
       aria-hidden="true"
-      className="paper-scroll h-full min-h-0 overflow-x-hidden overflow-y-auto overscroll-none bg-transparent"
+      className="paper-scroll min-h-0 overflow-x-hidden overflow-y-auto overscroll-none bg-transparent"
       ref={scrollRef}
     >
       <article

packages/app/src/components/MarkdownPaper.tsx

@@ -160,7 +160,7 @@ export function MarkdownPaper({
 
   return (
     <section
-      className="paper-scroll h-full min-h-0 overflow-x-hidden overflow-y-auto overscroll-none bg-transparent"
+      className="paper-scroll min-h-0 overflow-x-hidden overflow-y-auto overscroll-none bg-transparent"
       aria-label={t(language, "app.writingSurface")}
       onScroll={onScroll}
       ref={scrollRef}

packages/app/src/components/MarkdownSourceEditor.test.tsx

@@ -154,20 +154,18 @@ describe("MarkdownSourceEditor", () => {
     ).toBe(true);
   });
 
-  it("keeps source scrolling vertical without pane-level horizontal scroll", () => {
+  it("keeps source scrolling vertical without forcing the pane past its layout row", () => {
     const { container } = render(
       <MarkdownSourceEditor
         content="# Source"
         onChange={() => {}}
       />
     );
 
-    expect(container.querySelector(".paper-scroll")).toHaveClass(
-      "h-full",
-      "min-h-0",
-      "overflow-x-hidden",
-      "overflow-y-auto"
-    );
+    const sourceScroll = container.querySelector(".paper-scroll");
+
+    expect(sourceScroll).not.toHaveClass("h-full");
+    expect(sourceScroll).toHaveClass("min-h-0", "overflow-x-hidden", "overflow-y-auto");
   });
 
   it("shows document line numbers when enabled and updates them without recreating the editor", async () => {

packages/app/src/components/MarkdownSourceEditor.tsx

@@ -538,7 +538,7 @@ export function MarkdownSourceEditor({
 
   return (
     <section
-      className="paper-scroll h-full min-h-0 overflow-x-hidden overflow-y-auto overscroll-none bg-transparent"
+      className="paper-scroll min-h-0 overflow-x-hidden overflow-y-auto overscroll-none bg-transparent"
       aria-label={t(language, "app.writingSurface")}
       onScroll={handlePaperScroll}
       ref={scrollRef}

packages/app/src/components/QuietStatus.tsx

@@ -26,7 +26,7 @@ export function QuietStatus({
 
   return (
     <footer
-      className="quiet-status pointer-events-none absolute right-4.5 bottom-3 flex justify-end gap-2.5 text-[12px] leading-5 text-(--text-secondary) opacity-[0.68]"
+      className="quiet-status pointer-events-none flex min-h-11 flex-wrap items-center justify-end gap-x-2.5 px-4.5 py-2 text-[12px] leading-5 text-(--text-secondary) opacity-[0.68]"
       aria-label={label("app.documentStatus")}
     >
       {showWordCount ? (

packages/app/src/components/SideDocumentPane.tsx

@@ -12,7 +12,6 @@ import { MarkdownPaper } from "./MarkdownPaper";
 
 type SideDocumentPaneProps = {
   bodyFontSize: number;
-  bottomOverlayInset?: number;
   content: string;
   contentWidth: EditorContentWidth;
   contentWidthPx: number | null;
@@ -58,7 +57,6 @@ function ignoreSideEditorReady() {
 
 export function SideDocumentPane({
   bodyFontSize,
-  bottomOverlayInset = 0,
   content,
   contentWidth,
   contentWidthPx,
@@ -102,13 +100,12 @@ export function SideDocumentPane({
 
   return (
     <section
-      className="side-document-pane relative h-full min-h-0 overflow-hidden bg-(--bg-primary)"
+      className="side-document-pane relative grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] overflow-hidden bg-(--bg-primary)"
       aria-label={label("app.sideDocument")}
       onFocusCapture={onFocus}
     >
       {mode === "source" ? (
         <LazyMarkdownSourceEditor
-          bottomOverlayInset={bottomOverlayInset}
           bodyFontSize={bodyFontSize}
           content={content}
           contentWidth={contentWidth}
@@ -132,7 +129,6 @@ export function SideDocumentPane({
       ) : (
         <MarkdownPaper
           autoFocus={false}
-          bottomOverlayInset={bottomOverlayInset}
           bodyFontSize={bodyFontSize}
           contentWidth={contentWidth}
           contentWidthPx={contentWidthPx}

packages/app/src/styles.css

@@ -731,6 +731,11 @@
     background-color: color-mix(in srgb, var(--accent) 42%, transparent);
   }
 
+  .paper-scroll {
+    height: 100%;
+  }
+
+  /* Keep this contextual height in CSS: h-full plus the fixed top offset would overflow into the status row. */
   .editor-content-slot .paper-scroll {
     height: calc(100% - 2.5rem);
     margin-top: 2.5rem;