From 9d2e59baf6c61f8b084dc6053cc92d671a76fecb Mon Sep 17 00:00:00 2001
From: Lycoon <hugo.bois@hotmail.fr>
Date: Tue, 21 Jul 2026 01:38:40 +0200
Subject: [PATCH 1/2] fix inflated font size on mobile

---
 components/editor/DocumentEditorPanel.tsx | 37 +++++++++++++++++----
 components/editor/EditorPanel.module.css  | 40 +++++++++++++++++++----
 src-tauri/Cargo.lock                      |  3 --
 src-tauri/Cargo.toml                      |  6 ----
 src-tauri/src/lib.rs                      | 38 +++++----------------
 src/app/layout.tsx                        | 32 ------------------
 styles/globals.css                        |  8 -----
 styles/scriptio.css                       | 22 -------------
 8 files changed, 72 insertions(+), 114 deletions(-)

diff --git a/components/editor/DocumentEditorPanel.tsx b/components/editor/DocumentEditorPanel.tsx
index 9081cc16..b4934d8e 100644
--- a/components/editor/DocumentEditorPanel.tsx
+++ b/components/editor/DocumentEditorPanel.tsx
@@ -211,19 +211,22 @@ const DocumentEditorPanel = ({
     // size via a compact --display-margin-scale — no page rectangles, so nothing
     // shifts while writing. Paged (endless off): render the real fixed-size page —
     // page breaks, headers, footers, exactly like desktop — and scale the whole
-    // page down with `zoom` so it fits the viewport width. A fixed page rectangle
-    // means its boundaries never move as you type, so there are no layout shifts.
-    // `zoom` is a uniform visual scale and pagination is measured off-screen, so
-    // page count / numbering are unaffected either way.
+    // page down with transform: scale() so it fits the viewport width. A fixed
+    // page rectangle means its boundaries never move as you type, so there are no
+    // layout shifts. The scale is purely visual (NOT `zoom`: WebKit clamps
+    // zoom-shrunk fonts to a 9px rendered minimum, inflating the screenplay font
+    // — see the paged-mode rule in EditorPanel.module.css) and pagination is
+    // measured off-screen, so page count / numbering are unaffected either way.
     useEffect(() => {
         const container = containerEl;
         if (!container) return;
 
         const pageSize = SCREENPLAY_FORMATS[pageFormat as keyof typeof SCREENPLAY_FORMATS];
-        // Only the phone paged view is zoomed. Endless reflows (no zoom); desktop
+        // Only the phone paged view is scaled. Endless reflows (no scale); desktop
         // shows the page at 1:1.
         if (!isPhone || isEndlessScroll || !pageSize) {
             container.style.removeProperty("--editor-zoom");
+            container.style.removeProperty("--editor-layout-height");
             return;
         }
 
@@ -239,8 +242,28 @@ const DocumentEditorPanel = ({
         apply();
         const ro = new ResizeObserver(apply);
         ro.observe(container);
-        return () => ro.disconnect();
-    }, [containerEl, isPhone, isEndlessScroll, pageFormat]);
+
+        // transform: scale() doesn't shrink the layout box the way `zoom` did, so
+        // the CSS collapses the leftover (1 − scale) tail of the editor's layout
+        // height with a negative margin. Track the untransformed height here
+        // (offsetHeight ignores transforms) and expose it as a CSS var.
+        const editorDOM = editor?.view?.dom;
+        let heightObserver: ResizeObserver | undefined;
+        if (editorDOM) {
+            const applyHeight = () => {
+                container.style.setProperty("--editor-layout-height", `${editorDOM.offsetHeight}px`);
+            };
+            applyHeight();
+            heightObserver = new ResizeObserver(applyHeight);
+            heightObserver.observe(editorDOM);
+        }
+
+        return () => {
+            ro.disconnect();
+            heightObserver?.disconnect();
+            container.style.removeProperty("--editor-layout-height");
+        };
+    }, [containerEl, isPhone, isEndlessScroll, pageFormat, editor]);
 
     // ---- Orphaned comment cleanup ----
     // Comments anchor to a node's data-id. When that node is deleted the comment
diff --git a/components/editor/EditorPanel.module.css b/components/editor/EditorPanel.module.css
index fed958b6..9706d7c6 100644
--- a/components/editor/EditorPanel.module.css
+++ b/components/editor/EditorPanel.module.css
@@ -265,13 +265,41 @@
 
     /* PAGED mode (endless off): render exactly like desktop — real fixed-size
      * pages, page breaks, headers, footers — and scale the whole page down to fit
-     * the viewport with `zoom` (--editor-zoom is computed in DocumentEditorPanel).
-     * Because the page is a fixed rectangle, its boundaries never move while
-     * writing, so there are no layout shifts — the tradeoff being smaller text
-     * than endless mode's reflow. The page keeps its canonical width (from the
-     * injected `.pagination` rule) and stays centred as it scales. */
+     * the viewport with transform: scale() (--editor-zoom is computed in
+     * DocumentEditorPanel). Because the page is a fixed rectangle, its boundaries
+     * never move while writing, so there are no layout shifts — the tradeoff
+     * being smaller text than endless mode's reflow.
+     *
+     * transform, NOT `zoom`: WebKit multiplies computed font sizes by `zoom`
+     * (usedZoom) and then applies its "smart minimum font size"
+     * (minimumLogicalFontSize = 9, StyleFontSizeFunctions.cpp): any absolute
+     * font-size ≥ 9px whose zoomed result lands below 9px is clamped back up to
+     * a rendered 9px. On a phone (zoom ≈ 0.48) the 16px screenplay font came out
+     * as 9px rendered — reported as 9 / zoom ≈ 18.7px computed — cramming
+     * oversized glyphs into the fixed 16px line boxes and wrapping text
+     * differently than the offscreen pagination measurement. There is NO CSS
+     * opt-out (text-size-adjust and text autosizing are different code paths and
+     * do not participate). transform leaves computed font sizes at their
+     * canonical values — layout is pixel-identical to the measurement pass — and
+     * only scales at paint time, so the clamp never triggers.
+     *
+     * Unlike zoom, transform doesn't shrink the layout box, so two compensations
+     * are needed (both !important to beat the injected
+     * `.pagination { margin: 0 auto !important }`; this three-class selector
+     * then wins on specificity — same trick as the endless width override):
+     * - centring: equal negative side margins centre the canonical-width box in
+     *   the wrapper (margin auto would pin an overflowing box to the left);
+     *   transform-origin top center then scales it in place.
+     * - height: negative margin-bottom collapses the (1 − zoom) tail of the
+     *   unscaled layout height so the scroll extent matches what is visible.
+     *   --editor-layout-height (the editor's untransformed offsetHeight) is fed
+     *   by a ResizeObserver in DocumentEditorPanel. */
     .editor_wrapper:not(.endless_scroll) :global(.ProseMirror) {
-        zoom: var(--editor-zoom, 1);
+        transform: scale(var(--editor-zoom, 1));
+        transform-origin: top center;
+        margin-left: calc((100% - var(--page-width)) / 2) !important;
+        margin-right: calc((100% - var(--page-width)) / 2) !important;
+        margin-bottom: calc((var(--editor-zoom, 1) - 1) * var(--editor-layout-height, 0px)) !important;
     }
 
     .editor_shadow {
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 9b502f5d..ec5b1bf5 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -7,8 +7,6 @@ name = "Scriptio"
 version = "0.0.0"
 dependencies = [
  "log",
- "objc2",
- "objc2-foundation",
  "serde",
  "serde_json",
  "tauri",
@@ -2596,7 +2594,6 @@ checksum = "e3e0adef53c21f888deb4fa59fc59f7eb17404926ee8a6f59f5df0fd7f9f3272"
 dependencies = [
  "bitflags 2.10.0",
  "block2",
- "libc",
  "objc2",
  "objc2-core-foundation",
 ]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index f1dadddc..3b809be7 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -28,9 +28,3 @@ tauri-plugin-dialog = "2.6.0"
 tauri-plugin-fs = "2.4.5"
 tauri-plugin-clipboard-manager = "2"
 tauri-plugin-opener = "2.5.3"
-
-# iOS: disable WKWebView text autosizing (see textAutosizing fix in lib.rs).
-# Versions pinned to what Tauri already resolves so no extra tree is pulled.
-[target.'cfg(target_os = "ios")'.dependencies]
-objc2 = "0.6"
-objc2-foundation = { version = "0.3", features = ["NSString", "NSValue"] }
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index bf5f3e15..487b7490 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -3,6 +3,14 @@ fn some_noop_command() {
     // This does nothing, used for a handshake check
 }
 
+// NOTE on the iOS "inflated font" bug (paged mode, 16px → ~18.7px): this was
+// WebKit's smart minimum font size (minimumLogicalFontSize = 9), which clamps
+// `specifiedSize × zoom` up to a rendered 9px whenever the specified size is
+// ≥ 9px — reported as 9 / zoom ≈ 18.7px. It is NOT text autosizing, so the
+// former native `_setTextAutosizingEnabled:` workaround here was a no-op (and
+// private API, an App Store risk). The real fix is CSS-side: the phone paged
+// view scales with transform: scale() instead of `zoom`, which never enters
+// the clamp's code path. See the paged-mode rule in EditorPanel.module.css.
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -20,36 +28,6 @@ pub fn run() {
                 )?;
             }
 
-            // iOS WKWebView inflates ("text autosizing") the editor font: the
-            // screenplay page lays out at a fixed ~818px width and the phone CSS
-            // scales it down with `zoom`, but WKWebView then boosts the font by
-            // the column-width/viewport ratio (~2x) so 12pt renders at ~33px,
-            // overflowing the fixed 16px line box. CSS can't stop it here —
-            // `-webkit-text-size-adjust: none` is honoured in getComputedStyle
-            // yet ignored by the autosizer — so turn the feature off natively on
-            // WKPreferences via the private `textAutosizingEnabled` key (KVC).
-            #[cfg(target_os = "ios")]
-            {
-                use tauri::Manager;
-                if let Some(webview) = app.webview_windows().values().next().cloned() {
-                    let _ = webview.with_webview(|wv| unsafe {
-                        use objc2::msg_send;
-                        use objc2::runtime::AnyObject;
-                        use objc2_foundation::{NSNumber, NSString};
-
-                        let view: *mut AnyObject = wv.inner().cast();
-                        if view.is_null() {
-                            return;
-                        }
-                        let configuration: *mut AnyObject = msg_send![view, configuration];
-                        let preferences: *mut AnyObject = msg_send![configuration, preferences];
-                        let disabled = NSNumber::new_bool(false);
-                        let key = NSString::from_str("textAutosizingEnabled");
-                        let _: () = msg_send![preferences, setValue: &*disabled, forKey: &*key];
-                    });
-                }
-            }
-
             Ok(())
         })
         .invoke_handler(tauri::generate_handler![some_noop_command])
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7e8abe41..6a1c889a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,38 +13,6 @@ const URL = "https://scriptio.app/";
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="en" suppressHydrationWarning>
-            <head>
-                {/* Disable WebKit text autosizing.
-                 *
-                 * MUST live here as a raw <style> rather than in a .css file.
-                 * Lightning CSS (bundled in Next's pipeline) rewrites vendor
-                 * prefixes from the browserslist targets, and its compat data
-                 * wrongly believes Safari supports unprefixed `text-size-adjust`
-                 * — so it deletes `-webkit-text-size-adjust` from every
-                 * stylesheet and emits only `-moz-` + unprefixed. WebKit
-                 * implements ONLY the prefixed form, so the declaration silently
-                 * vanishes on exactly the browsers that need it (all iOS).
-                 * A style string in JSX never reaches that pipeline.
-                 *
-                 * Why it matters: in phone paged mode .ProseMirror keeps its
-                 * canonical 818px --page-width and is scaled down with `zoom`,
-                 * so WebKit sees a block ~2x the viewport and clamps the 12pt
-                 * screenplay font up to a "readable" ~18.7px. That crams the
-                 * glyphs into the fixed 16px --line-height and makes the visible
-                 * text wrap differently than #pagination-test-div measured it,
-                 * so page breaks stutter while typing. Endless mode is immune
-                 * (width:100%, so no inflation) — which is why the bug looked
-                 * mode-specific.
-                 *
-                 * Costs no accessibility: desktop engines treat `none` as 100%,
-                 * browser page zoom is unaffected, and the editor exposes its
-                 * own font-size control. */}
-                <style
-                    dangerouslySetInnerHTML={{
-                        __html: "html{-webkit-text-size-adjust:none}",
-                    }}
-                />
-            </head>
             <body>
                 <Providers>
                     <div className="app-layout">
diff --git a/styles/globals.css b/styles/globals.css
index d8838420..32e0a526 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -6,14 +6,6 @@ body {
     height: 100%;
     width: 100%;
     overflow: clip;
-    /* Disable mobile text autosizing ("font boosting"). Without this, phone
-     * browsers inflate the editor's 16px screenplay font (~18.7px) while the
-     * offscreen pagination measurement div (#pagination-test-div, hidden) stays
-     * at 16px — so text wraps differently than measured and page breaks stutter
-     * while typing. It also crams the boosted glyphs into the fixed 16px
-     * --line-height. All font sizes here are deliberate; never auto-inflate. */
-    -webkit-text-size-adjust: 100%;
-    text-size-adjust: 100%;
 }
 
 .app-layout {
diff --git a/styles/scriptio.css b/styles/scriptio.css
index 4f4f6b51..16e9aa2d 100644
--- a/styles/scriptio.css
+++ b/styles/scriptio.css
@@ -60,28 +60,6 @@
     --transition-r-margin: 1in;
     --line-height: 16px;
 
-    /* Hard-disable mobile text autosizing on the screenplay surface.
-     *
-     * Blink/WebKit inflate the font of any block wider than the viewport. In
-     * endless mode .ProseMirror is width:100%, so the multiplier is 1 and text
-     * renders at the real 12pt. In paged mode the element keeps its canonical
-     * --page-width (818px) and is scaled down with `zoom`, so the autosizer sees
-     * a block ~2x the viewport and boosts 12pt to ~14pt (16px -> ~18.7px). That
-     * breaks two invariants at once: the boosted glyphs are crammed into the
-     * fixed 16px --line-height, and the visible text wraps differently than
-     * #pagination-test-div measured it, so page breaks stutter while typing.
-     *
-     * `none` rather than `100%`: iOS keeps autosizing inside `zoom`ed subtrees
-     * under the advisory 100%. Desktop engines treat `none` as 100%, so this is
-     * a no-op there, and it costs no accessibility — the editor exposes its own
-     * font-size control, and browser page zoom is unaffected.
-     *
-     * #pagination-test-div carries `class="ProseMirror pagination"`, so it is
-     * matched by this rule too: measurement and display stay in lockstep, which
-     * is the invariant pagination-extension.ts depends on. */
-    -webkit-text-size-adjust: none;
-    text-size-adjust: none;
-
     border: none !important;
     background-color: var(--editor-script-bg) !important;
 

From d3d86d8d01e73b9961793daf6c67857d8edfc30f Mon Sep 17 00:00:00 2001
From: Lycoon <hugo.bois@hotmail.fr>
Date: Tue, 21 Jul 2026 03:13:42 +0200
Subject: [PATCH 2/2] improved mobile experience

---
 components/board/BoardCanvas.module.css       |  9 +++
 .../dashboard/DashboardModal.module.css       |  6 ++
 components/editor/DocumentEditorPanel.tsx     | 73 ++++++++++++++-----
 components/editor/EditorPanel.module.css      | 25 ++++++-
 .../editor/timeline/TimelinePanel.module.css  |  9 +++
 components/navbar/ProjectNavbar.module.css    | 48 +++++++-----
 .../project/ProjectWorkspace.module.css       | 10 +++
 components/project/ProjectWorkspace.tsx       |  5 +-
 .../project/SplitPanelContainer.module.css    | 10 +++
 .../stats/ProjectStatsContainer.module.css    | 10 +++
 src-tauri/src/lib.rs                          |  8 --
 src/lib/editor/focus-in-viewport.ts           | 44 +++++++++++
 styles/scriptio.css                           | 13 ++--
 13 files changed, 213 insertions(+), 57 deletions(-)
 create mode 100644 src/lib/editor/focus-in-viewport.ts

diff --git a/components/board/BoardCanvas.module.css b/components/board/BoardCanvas.module.css
index c9403e6b..7481fe35 100644
--- a/components/board/BoardCanvas.module.css
+++ b/components/board/BoardCanvas.module.css
@@ -621,6 +621,15 @@
    so typing/caret placement still works. The drag/resize/connection handles have
    no hover on touch, so surface them and enlarge them into comfortable targets. */
 @media (max-width: 767px) {
+    /* The navbar is a fixed overlay pinned to the top (see ProjectNavbar). The
+     * board doesn't drive the scroll-hide, so the bar stays shown over it — push
+     * the whole canvas down by one bar height so its top strip isn't trapped
+     * behind the bar. The canvas measures its own rect for panning, so shifting
+     * the wrapper leaves the pan/zoom math correct. */
+    .board_wrapper {
+        padding-top: var(--navbar-height);
+    }
+
     .container {
         touch-action: none;
         /* The canvas owns all touch gestures. Without this, a double-tap or
diff --git a/components/dashboard/DashboardModal.module.css b/components/dashboard/DashboardModal.module.css
index 2bab6a0c..88038ab1 100644
--- a/components/dashboard/DashboardModal.module.css
+++ b/components/dashboard/DashboardModal.module.css
@@ -130,6 +130,12 @@
     padding: 30px;
     background: var(--main-bg);
     min-height: 0;
+    /* Without this, a panel containing a child with a fixed minimum width wider
+     * than the narrow phone drawer (e.g. Keybinds' .keyArea, Layout's margin-input
+     * pills) forces .content past the modal's `overflow: hidden` edge, clipping the
+     * right gutter and the close button. min-width:0 pins .content to the drawer
+     * width so any overflow scrolls inside .scrollArea and the header stays aligned. */
+    min-width: 0;
 }
 
 .contentHeader {
diff --git a/components/editor/DocumentEditorPanel.tsx b/components/editor/DocumentEditorPanel.tsx
index b4934d8e..d0bce908 100644
--- a/components/editor/DocumentEditorPanel.tsx
+++ b/components/editor/DocumentEditorPanel.tsx
@@ -26,6 +26,7 @@ import { DocumentEditorConfig, EDITOR_INPUT_ATTRIBUTES } from "@src/lib/editor/d
 import { useDocumentComments } from "@src/lib/editor/use-document-comments";
 import { getNodeIdAtPos, transactionDeletesNode } from "@src/lib/screenplay/comment-anchors";
 import { useDocumentEditor } from "@src/lib/editor/use-document-editor";
+import { focusEditorInViewport } from "@src/lib/editor/focus-in-viewport";
 import { getSpellErrorAt } from "@src/lib/spellcheck/spellcheck-extension";
 import type { SuggestionData } from "@components/editor/SuggestionMenu";
 
@@ -107,8 +108,14 @@ const DocumentEditorPanel = ({
     // actively scrolling (or being dragged) and faded out shortly after, so it
     // never sits on top of the writing while at rest.
     const [showScrollThumb, setShowScrollThumb] = useState(false);
-    const [thumbTop, setThumbTop] = useState(0);
     const [canScrollThumb, setCanScrollThumb] = useState(false);
+    // The handle's position is written straight to the DOM (not React state) so
+    // tracking the scroll gesture never re-renders this (heavy) panel — that
+    // per-event re-render is what made the scroll-linked chrome-hide stutter
+    // against the finger. thumbTopRef seeds the transform when the handle
+    // (re)mounts; updateThumb writes it imperatively thereafter.
+    const scrollHandleRef = useRef<HTMLDivElement | null>(null);
+    const thumbTopRef = useRef(0);
     const scrollIdleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
     const isDraggingThumb = useRef(false);
     // The draggable scroll track element, measured to derive the handle's travel
@@ -117,6 +124,10 @@ const DocumentEditorPanel = ({
     // Last scrollTop, to derive scroll direction for hiding/showing the mobile
     // editor chrome (navbar + sidebar edge handles).
     const lastScrollTop = useRef(0);
+    // Coalesces all scroll-driven work into a single update per animation frame
+    // (see onScroll). A burst of scroll events then costs one layout, aligned to
+    // the paint cycle, so the chrome stays glued to the scroll instead of lagging.
+    const scrollRafRef = useRef<number | null>(null);
     // Continuous 0→1 progress for hiding that chrome, tracked so it follows the
     // scroll gesture linearly rather than snapping at a threshold (see
     // applyChromeHide). Mirrored into the --chrome-hide CSS variable.
@@ -786,7 +797,10 @@ const DocumentEditorPanel = ({
     // bottom inset keeps it off the very bottom of the screen.
     const HANDLE_HEIGHT = 44;
     const TRACK_INSET_TOP = 60;
-    const TRACK_INSET_BOTTOM = 24;
+    // Base bottom gap only; the CSS adds --safe-bottom on top, which can't be read
+    // here. This is just the first-frame travel-range fallback before the track
+    // element mounts and is measured directly, so the missing inset is harmless.
+    const TRACK_INSET_BOTTOM = 8;
 
     // How far the handle can travel down its track. Measured off the track element
     // itself, which is fixed to the viewport (see .scroll_track) so the range stays
@@ -814,7 +828,10 @@ const DocumentEditorPanel = ({
             return;
         }
         setCanScrollThumb(true);
-        setThumbTop((scrollTop / scrollable) * thumbTravel());
+        const top = (scrollTop / scrollable) * thumbTravel();
+        thumbTopRef.current = top;
+        const handle = scrollHandleRef.current;
+        if (handle) handle.style.transform = `translateY(${top}px)`;
     }, [containerEl, thumbTravel]);
 
     // Reveal the thumb and (re)arm the timer that hides it once scrolling has
@@ -877,7 +894,10 @@ const DocumentEditorPanel = ({
             const ed = editor;
             if (ed) {
                 ed.setEditable(true);
-                ed.commands.focus();
+                // Drop the caret on a character that's currently on screen rather
+                // than at the old selection, so entering edit mode doesn't scroll
+                // the view away to wherever the caret last was.
+                focusEditorInViewport(ed);
             }
             return;
         }
@@ -890,25 +910,36 @@ const DocumentEditorPanel = ({
         }, 280);
     }, [isPhone, mobileEditMode, isReadOnly, editor, setMobileEditMode, applyChromeHide]);
 
-    const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const onScroll = () => {
         if (suggestions.length > 0) updateSuggestions?.([]);
-        const el = e.currentTarget;
-        // Clamp to the real scroll range. iOS rubber-band overscroll reports a
-        // scrollTop below 0 (top) or beyond the maximum (bottom) and then springs
-        // back, which would otherwise feed spurious up/down deltas into the chrome
-        // hide and make the navbar flicker as the bounce settles. Clamping pins
-        // the delta to 0 while overscrolling, so the bounce leaves the bar alone.
-        const maxScroll = el.scrollHeight - el.clientHeight;
-        const scrollTop = Math.max(0, Math.min(el.scrollTop, maxScroll));
-        setIsScrolled(scrollTop > 0);
-        if (isPhone) {
+        // Coalesce into one update per frame. iOS delivers scroll events on the
+        // main thread at an irregular cadence while the page scrolls on the
+        // compositor; doing the work per event (each a layout, plus a re-render)
+        // let the chrome drift behind the finger and stutter. Draining the latest
+        // scrollTop once per rAF keeps a single, paint-aligned update.
+        if (scrollRafRef.current != null) return;
+        scrollRafRef.current = requestAnimationFrame(() => {
+            scrollRafRef.current = null;
+            const el = containerEl;
+            if (!el) return;
+            // Clamp to the real scroll range. iOS rubber-band overscroll reports a
+            // scrollTop below 0 (top) or beyond the maximum (bottom) and then
+            // springs back, which would otherwise feed spurious up/down deltas
+            // into the chrome hide and make the navbar flicker as the bounce
+            // settles. Clamping pins the delta to 0 while overscrolling, so the
+            // bounce leaves the bar alone.
+            const maxScroll = el.scrollHeight - el.clientHeight;
+            const scrollTop = Math.max(0, Math.min(el.scrollTop, maxScroll));
+            setIsScrolled(scrollTop > 0);
+            if (!isPhone) return;
             updateThumb();
             revealScrollThumb();
 
             // Accumulate scroll movement into the hide progress over
-            // CHROME_HIDE_RANGE px: scrolling down slides the chrome away, scrolling
-            // up brings it back. Snap fully open at the very top. In edit mode the
-            // navbar carries the exit/undo/redo controls, so keep it pinned open.
+            // CHROME_HIDE_RANGE px: scrolling down slides the chrome away,
+            // scrolling up brings it back (from anywhere in the doc). Snap fully
+            // open at the very top. In edit mode the navbar carries the
+            // exit/undo/redo controls, so keep it pinned open.
             const delta = scrollTop - lastScrollTop.current;
             if (mobileEditMode || scrollTop <= 4) {
                 applyChromeHide(0);
@@ -916,7 +947,7 @@ const DocumentEditorPanel = ({
                 applyChromeHide(chromeHideRef.current + delta / CHROME_HIDE_RANGE);
             }
             lastScrollTop.current = scrollTop;
-        }
+        });
     };
 
     // Drag the thumb to scroll: map vertical pointer movement onto scrollTop via
@@ -961,6 +992,7 @@ const DocumentEditorPanel = ({
         return () => {
             if (scrollIdleTimer.current) clearTimeout(scrollIdleTimer.current);
             if (tapTimer.current) clearTimeout(tapTimer.current);
+            if (scrollRafRef.current != null) cancelAnimationFrame(scrollRafRef.current);
         };
     }, []);
 
@@ -1054,8 +1086,9 @@ const DocumentEditorPanel = ({
                     )}
                 >
                     <div
+                        ref={scrollHandleRef}
                         className={styles.scroll_handle}
-                        style={{ transform: `translateY(${thumbTop}px)` }}
+                        style={{ transform: `translateY(${thumbTopRef.current}px)` }}
                         onPointerDown={onThumbPointerDown}
                     >
                         <GripVertical size={16} />
diff --git a/components/editor/EditorPanel.module.css b/components/editor/EditorPanel.module.css
index 9706d7c6..0635d477 100644
--- a/components/editor/EditorPanel.module.css
+++ b/components/editor/EditorPanel.module.css
@@ -134,11 +134,14 @@
     position: fixed;
     /* --navbar-height positions the handle just below the (shown) navbar; the +60
      * then clears the right sidebar edge toggle (top:8px, up to 44px tall on touch)
-     * plus a small gap. Bottom inset keeps it off the very bottom edge of the
-     * screen. Keep the +60 / bottom in sync with TRACK_INSET_TOP /
-     * TRACK_INSET_BOTTOM in DocumentEditorPanel (the travel-range fallback). */
+     * plus a small gap. The bottom sits 8px above the safe-area inset, so the
+     * handle's lower end lines up with the MobileFormatToolbar (which floats 8px
+     * above the keyboard) and clears the home indicator instead of dipping into it.
+     * Keep the +60 / bottom base in sync with TRACK_INSET_TOP / TRACK_INSET_BOTTOM
+     * in DocumentEditorPanel (the travel-range fallback; the safe-area part is
+     * measured, not part of the constant). */
     top: calc(var(--navbar-height) + 60px);
-    bottom: 24px;
+    bottom: calc(var(--safe-bottom) + 8px);
     /* Right offset matches .right_sidebar_toggle (ProjectWorkspace) so the handle
      * lines up horizontally with the sidebar edge toggle. */
     right: 8px;
@@ -210,6 +213,13 @@
          * edge. Drop the reserved gutter too so the page uses the full width. */
         scrollbar-gutter: auto;
         scrollbar-width: none;
+        /* The mobile navbar is a fixed overlay pinned to the top (see ProjectNavbar
+         * .container:not(.home_container)), so this scroller fills the full height
+         * *behind* it. Pad the top by one navbar height so the first line clears the
+         * bar at rest, while the content still scrolls up UNDER the bar and is
+         * revealed as it slides away — the Google-Docs reclaim. The pad is constant,
+         * so the scroll viewport never resizes and content tracks the finger 1:1. */
+        padding-top: var(--navbar-height);
     }
 
     .container::-webkit-scrollbar {
@@ -304,5 +314,12 @@
 
     .editor_shadow {
         max-width: none;
+        /* Stick the top shadow to the navbar's current bottom edge. The scroller is
+         * padded by a full navbar height (see .container above), which is also the
+         * sticky baseline — so `top: 0` already parks the shadow right below the
+         * shown bar. As the fixed bar slides up (--chrome-hide 0 → 1), offset the
+         * sticky point up by that much so the shadow rides the bar to the very top
+         * instead of hanging a navbar height too low, below the edge toggles. */
+        top: calc(var(--navbar-height) * var(--chrome-hide, 0) * -1);
     }
 }
diff --git a/components/editor/timeline/TimelinePanel.module.css b/components/editor/timeline/TimelinePanel.module.css
index d25aef85..66430164 100644
--- a/components/editor/timeline/TimelinePanel.module.css
+++ b/components/editor/timeline/TimelinePanel.module.css
@@ -19,6 +19,15 @@
     -webkit-user-select: text;
 }
 
+/* Phone: the navbar is a fixed overlay pinned to the top (see ProjectNavbar), so
+ * the timeline strip — first in the column — would otherwise sit behind it. Push
+ * it below the bar. */
+@media (max-width: 767px) {
+    .timeline {
+        margin-top: var(--navbar-height);
+    }
+}
+
 /* ---- Toolbar ---- */
 
 .toolbar {
diff --git a/components/navbar/ProjectNavbar.module.css b/components/navbar/ProjectNavbar.module.css
index aa0d0c0a..17d6f771 100644
--- a/components/navbar/ProjectNavbar.module.css
+++ b/components/navbar/ProjectNavbar.module.css
@@ -57,14 +57,12 @@
     border-radius: 999px;
     box-shadow: var(--panel-shadow);
 
-    /* Hide by sliding the pill straight up off the bar and fading in lockstep,
-     * both driven by --chrome-hide (0 shown → 1 hidden). The pill translates its
-     * FULL travel (a whole navbar height) so it keeps moving until it's gone,
-     * rather than collapsing in place and leaving a clipped sliver to fade out —
-     * translate and opacity now finish together. No transition: it tracks the
-     * scroll gesture directly (see applyChromeHide). On desktop these clusters
-     * don't render and --chrome-hide stays 0, so this is inert there. */
-    transform: translateY(calc(var(--chrome-hide, 0) * -1 * var(--navbar-height)));
+    /* Fade the pill out as the chrome hides. The whole bar (.container) now slides
+     * up as one unit, so the pill no longer translates on its own — it just fades,
+     * in lockstep with the bar's slide, driven by --chrome-hide (0 shown → 1
+     * hidden). No transition: it tracks the scroll gesture directly (see
+     * applyChromeHide). On desktop these clusters don't render and --chrome-hide
+     * stays 0, so this is inert there. */
     opacity: calc(1 - var(--chrome-hide, 0));
 }
 
@@ -116,19 +114,31 @@
          * clear of the bar's bottom edge. */
         padding-block: 0;
         padding-top: var(--safe-top);
-        overflow: hidden;
-        /* Collapse the bar's height continuously as the reader scrolls down:
-         * --chrome-hide runs 0 (shown) → 1 (hidden), driven straight from
-         * scrollTop in DocumentEditorPanel. Height reclaims the space (the
-         * workspace is a flex column, so this reflows cleanly) and there is
-         * intentionally no transition — it tracks the gesture, not an ease. The
-         * fade lives on the pill clusters themselves (.mobile_left/.mobile_right)
-         * so it stays in lockstep with their slide-up rather than fading the
-         * whole row on a separate curve. */
-        height: calc(var(--navbar-height) * (1 - var(--chrome-hide, 0)));
+        /* Hide the bar by sliding it straight up off the top as the reader scrolls
+         * down — a compositor-only transform, NOT a height collapse. --chrome-hide
+         * runs 0 (shown) → 1 (fully up), driven from scrollTop in
+         * DocumentEditorPanel; no transition so it tracks the gesture, not an ease. */
+        transform: translateY(calc(var(--chrome-hide, 0) * -1 * var(--navbar-height)));
+        will-change: transform;
     }
 
-    /* Fully hidden: drop hit-testing so the collapsed sliver can't catch taps. */
+    /* Project (reader) bar only — NOT the home bar (.home_container), which must
+     * stay in normal flow. Lift the bar OUT of the flex column into a fixed overlay
+     * pinned to the top. The editor scroll container then fills the full height
+     * behind it and pads its own top by --navbar-height (see EditorPanel
+     * .container), so the reader's content sits *under* the bar and is revealed as
+     * the bar slides away — the Google-Docs model. Because the bar no longer holds
+     * a slot in the column and the editor viewport never resizes, the content
+     * tracks the scroll 1:1 and the reclaimed space is filled by the content that
+     * was behind the bar, not by shifting the whole view. */
+    .container:not(.home_container) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+
+    /* Fully hidden: drop hit-testing so the off-screen bar can't catch taps. */
     .container_hidden {
         pointer-events: none;
     }
diff --git a/components/project/ProjectWorkspace.module.css b/components/project/ProjectWorkspace.module.css
index 262c137e..516cff77 100644
--- a/components/project/ProjectWorkspace.module.css
+++ b/components/project/ProjectWorkspace.module.css
@@ -54,6 +54,16 @@
     }
 }
 
+/* Phone: the navbar is a fixed overlay (see ProjectNavbar), so panel_area now
+ * starts at the very top under the bar. Drop the edge toggle below the bar so it
+ * isn't hidden behind it at rest (it still slides off-right as the reader scrolls
+ * via --chrome-hide). */
+@media (max-width: 767px) {
+    .right_sidebar_toggle {
+        top: calc(var(--navbar-height) + 8px);
+    }
+}
+
 .right_sidebar_toggle:hover {
     opacity: 1;
     background-color: var(--tertiary-hover);
diff --git a/components/project/ProjectWorkspace.tsx b/components/project/ProjectWorkspace.tsx
index fffa3ebf..37b09fb9 100644
--- a/components/project/ProjectWorkspace.tsx
+++ b/components/project/ProjectWorkspace.tsx
@@ -4,6 +4,7 @@ import { useContext, useEffect, useState } from "react";
 import { useViewContext } from "@src/context/ViewContext";
 import { ProjectContext } from "@src/context/ProjectContext";
 import { useActiveEditor } from "@src/lib/editor/use-active-editor";
+import { focusEditorInViewport } from "@src/lib/editor/focus-in-viewport";
 import { useIsPhone } from "@src/lib/utils/hooks";
 import EditorSidebarNavigation from "@components/editor/sidebar/EditorSidebarNavigation";
 import EditorSidebarFormat from "@components/editor/sidebar/EditorSidebarFormat";
@@ -59,7 +60,9 @@ const ProjectWorkspace = () => {
         const editor = activeEditor;
         if (editor) {
             editor.setEditable(true);
-            editor.commands.focus();
+            // Drop the caret on a character that's currently on screen rather than
+            // at the old selection, so the view doesn't jump when the keyboard rises.
+            focusEditorInViewport(editor);
         }
     };
 
diff --git a/components/project/SplitPanelContainer.module.css b/components/project/SplitPanelContainer.module.css
index d38375ae..3d20d491 100644
--- a/components/project/SplitPanelContainer.module.css
+++ b/components/project/SplitPanelContainer.module.css
@@ -164,6 +164,16 @@
     }
 }
 
+/* Phone: the navbar is a fixed overlay (see ProjectNavbar), so the panel now
+ * starts at the very top under the bar. Drop the left edge handles below the bar
+ * so they aren't hidden behind it at rest (they still slide off-left as the
+ * reader scrolls via --chrome-hide). */
+@media (max-width: 767px) {
+    .panel_switcher_anchor {
+        top: calc(var(--navbar-height) + 8px);
+    }
+}
+
 .panel_switcher_separator {
     height: 1px;
     margin: 4px 8px;
diff --git a/components/projects/stats/ProjectStatsContainer.module.css b/components/projects/stats/ProjectStatsContainer.module.css
index f1c02a64..47a2aa4e 100644
--- a/components/projects/stats/ProjectStatsContainer.module.css
+++ b/components/projects/stats/ProjectStatsContainer.module.css
@@ -8,6 +8,16 @@
     overflow-y: auto;
 }
 
+/* Phone: the navbar is a fixed overlay pinned to the top (see ProjectNavbar) and
+ * stats don't drive the scroll-hide, so the bar stays shown over them. Pad the
+ * scroll root's top by one bar height so the content isn't trapped behind it.
+ * (Also the root for the no-stats empty state, which reuses this .container.) */
+@media (max-width: 767px) {
+    .container {
+        padding-top: var(--navbar-height);
+    }
+}
+
 .center_content {
     width: 100%;
     max-width: 1100px;
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 487b7490..73a96e51 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -3,14 +3,6 @@ fn some_noop_command() {
     // This does nothing, used for a handshake check
 }
 
-// NOTE on the iOS "inflated font" bug (paged mode, 16px → ~18.7px): this was
-// WebKit's smart minimum font size (minimumLogicalFontSize = 9), which clamps
-// `specifiedSize × zoom` up to a rendered 9px whenever the specified size is
-// ≥ 9px — reported as 9 / zoom ≈ 18.7px. It is NOT text autosizing, so the
-// former native `_setTextAutosizingEnabled:` workaround here was a no-op (and
-// private API, an App Store risk). The real fix is CSS-side: the phone paged
-// view scales with transform: scale() instead of `zoom`, which never enters
-// the clamp's code path. See the paged-mode rule in EditorPanel.module.css.
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
diff --git a/src/lib/editor/focus-in-viewport.ts b/src/lib/editor/focus-in-viewport.ts
new file mode 100644
index 00000000..108ce030
--- /dev/null
+++ b/src/lib/editor/focus-in-viewport.ts
@@ -0,0 +1,44 @@
+import type { Editor } from "@tiptap/react";
+
+/**
+ * Focus a screenplay/title editor with the caret at a position that is currently
+ * visible on screen, rather than at the stored selection.
+ *
+ * On mobile the reader can be scrolled far from wherever the caret last sat, so a
+ * plain `editor.commands.focus()` (which restores that old selection and scrolls
+ * it into view) makes the whole view jump when entering edit mode. Instead, we
+ * hit-test a point in the upper part of the visible viewport and drop the caret
+ * on whatever character is there — so it's already on screen and stays put as the
+ * on-screen keyboard rises.
+ *
+ * Must be called synchronously inside the entering-edit tap gesture: iOS only
+ * raises the keyboard when `focus()` runs in the same user-gesture turn.
+ */
+export const focusEditorInViewport = (editor: Editor) => {
+    if (typeof window === "undefined") {
+        editor.commands.focus();
+        return;
+    }
+
+    const vv = window.visualViewport;
+    const width = vv?.width ?? window.innerWidth;
+    const height = vv?.height ?? window.innerHeight;
+    // Horizontally centered; a quarter of the way down the *visible* viewport —
+    // clear of the fixed navbar overlay pinned at the top and well above where the
+    // keyboard will rise from the bottom, so the hit-tested point (and the caret
+    // we place there) is on screen and stays visible once the keyboard is up.
+    const left = (vv?.offsetLeft ?? 0) + width / 2;
+    const top = (vv?.offsetTop ?? 0) + height * 0.25;
+
+    const coords = editor.view.posAtCoords({ left, top });
+    if (coords) {
+        // Place the caret on the character under that point. Tiptap resolves the
+        // raw position to the nearest valid text selection; it's already visible,
+        // so the focus's scroll-into-view is a no-op and nothing jumps.
+        editor.commands.focus(coords.pos);
+    } else {
+        // No node under the point (e.g. an empty/short document) — fall back to
+        // the default focus so the keyboard still comes up.
+        editor.commands.focus();
+    }
+};
diff --git a/styles/scriptio.css b/styles/scriptio.css
index 16e9aa2d..19e8ae30 100644
--- a/styles/scriptio.css
+++ b/styles/scriptio.css
@@ -210,12 +210,15 @@
         padding-right: calc(var(--scene-r-margin) * var(--display-margin-scale)) !important;
     }
 
-    /* Left scene number (CSS counter via ::before) */
+    /* Left scene number (CSS counter via ::before). The offset scales with
+       --display-margin-scale so the number tracks the (scaled) left gutter
+       instead of landing over the heading text in endless mode, where the
+       gutter is compressed to 0.3 (see EditorPanel.module.css). */
     .scene::before {
         position: absolute;
         content: counter(scenenumber);
         right: 100%;
-        margin-right: -120px;
+        margin-right: calc(-120px * var(--display-margin-scale));
     }
 
     /* Right scene number (CSS counter via ::after, hidden by default) */
@@ -224,7 +227,7 @@
         content: counter(scenenumber);
         top: 0;
         left: 100%;
-        margin-left: -85px;
+        margin-left: calc(-85px * var(--display-margin-scale));
         user-select: none;
         pointer-events: none;
         display: none;
@@ -257,7 +260,7 @@
     .scene-label-left {
         position: absolute;
         right: 100%;
-        margin-right: -120px;
+        margin-right: calc(-120px * var(--display-margin-scale));
         user-select: none;
         pointer-events: none;
         text-transform: none !important;
@@ -268,7 +271,7 @@
         position: absolute;
         top: 0;
         left: 100%;
-        margin-left: -85px;
+        margin-left: calc(-85px * var(--display-margin-scale));
         user-select: none;
         pointer-events: none;
         display: none;