fix(pwa): wrapping titles, personal check-off, borderless page editor, br hard breaks (WI-1331)

Mobile surface follow-ups from testing the new PWA:

- Item/page titles are auto-growing textareas now: long titles wrap
  instead of scrolling out of view, and Enter moves to the description.
- Personal tab: completed tasks leave the checklist (query filters
  status_completed = false, newest first); check-off is optimistic with
  rollback + toast, and the check is a 44px touch target with the small
  circle inside — the 24px target swallowed taps on phones.
- Page edits use the borderless Linear-style editor (hero title +
  content, sticky safe-area action bar) instead of the old boxed form.
- Milkdown now parses <br>/<br/>/<br /> html as hard breaks via a remark
  transformer registered through remarkPluginsCtx at config time —
  stored tags showed up as literal text (or vanished, 7.19) and
  round-tripped forever; converted content serializes back as real
  markdown hard breaks.

Author: stefan-ernst

frontend/src/lib/editors/MilkdownEditor.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from 'svelte';
   import { useEventListener } from 'runed';
-  import { Editor, rootCtx, defaultValueCtx, editorViewOptionsCtx, editorViewCtx, serializerCtx } from '@milkdown/kit/core';
+  import { Editor, rootCtx, defaultValueCtx, editorViewOptionsCtx, editorViewCtx, serializerCtx, remarkPluginsCtx } from '@milkdown/kit/core';
   import { commonmark, toggleStrongCommand, toggleEmphasisCommand, wrapInBulletListCommand, wrapInOrderedListCommand, toggleInlineCodeCommand } from '@milkdown/kit/preset/commonmark';
   import { gfm, toggleStrikethroughCommand } from '@milkdown/kit/preset/gfm';
   import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
@@ -20,6 +20,7 @@
   import MentionPicker from '../pickers/MentionPicker.svelte';
   import { mentionDecorationPlugin } from './milkdown-mention-mark.js';
   import { linkSanitizerPlugin } from './milkdown-link-sanitizer.js';
+  import { rewriteBreakHTML } from './milkdown-hardbreak.js';
   import { excalidrawBlock } from './milkdown-excalidraw-block.svelte.js';
   import PageDiagramModal from '../features/pages/PageDiagramModal.svelte';
   import { highlightCodeBlocks } from './code-highlight.js';
@@ -458,6 +459,14 @@
         .config((ctx) => {
           ctx.set(rootCtx, editorElement);
           ctx.set(defaultValueCtx, initialContent || '');
+          // Parse `<br>`-style html as hard breaks (see milkdown-hardbreak.js).
+          // Registered through remarkPluginsCtx here — config runs before the
+          // schema step snapshots the remark processor; a `.use($remark)`
+          // plugin appends after that snapshot and never takes effect.
+          ctx.update(remarkPluginsCtx, (plugins) => [
+            ...plugins,
+            { plugin: rewriteBreakHTML, options: {} },
+          ]);
           ctx.get(listenerCtx).markdownUpdated((ctx, markdown) => {
             // Listener notifications can be delivered after a newer editor
             // transaction (for example, selecting an @ mention). Always

frontend/src/lib/editors/milkdown-hardbreak.js

@@ -0,0 +1,55 @@
+// Milkdown serializes hard breaks in the middle of a paragraph as literal
+// `<br />` HTML, but its hardbreak schema only parses remark `break` nodes —
+// the HTML spellings come back as visible text (or get dropped) in the visual
+// editor and then round-trip forever. This remark plugin rewrites
+// `<br>`-style html nodes into real break nodes before Milkdown maps the
+// tree, so the editor shows a line break and the next save normalizes the
+// content to Markdown hard breaks.
+
+const BREAK_HTML = /^<br\s*\/?>$/i;
+
+// Parents whose children are inline: a bare break node is valid there.
+const INLINE_PARENTS = new Set(['paragraph']);
+
+// Block containers where a stray break must be wrapped in a paragraph to stay
+// valid mdast (a break is an inline node).
+const BLOCK_PARENTS = new Set(['root', 'blockquote', 'listItem']);
+
+function isBreakHTML(node) {
+  return (
+    node?.type === 'html' &&
+    typeof node.value === 'string' &&
+    BREAK_HTML.test(node.value.trim())
+  );
+}
+
+function replacementFor(parent) {
+  if (INLINE_PARENTS.has(parent.type)) return { type: 'break' };
+  if (BLOCK_PARENTS.has(parent.type))
+    return { type: 'paragraph', children: [{ type: 'break' }] };
+  return null;
+}
+
+function transform(node) {
+  if (!node || !Array.isArray(node.children)) return;
+  const children = node.children;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (isBreakHTML(child)) {
+      const replacement = replacementFor(node);
+      if (replacement) children[i] = replacement;
+      continue;
+    }
+    transform(child);
+  }
+}
+
+/**
+ * Unified plugin (attacher): convert `<br>`, `<br/>`, and `<br />` html nodes
+ * (inline and block level) into hard break nodes. Wired into the editor via
+ * `ctx.update(remarkCtx, (processor) => processor.use(rewriteBreakHTML))` —
+ * config-time updates are deterministic, unlike `$remark` whose plugin races
+ * the schema step that snapshots the remark processor. Exported separately so
+ * tests can run it through plain unified, without the editor context.
+ */
+export const rewriteBreakHTML = () => (tree) => transform(tree);

frontend/src/lib/mobile/MobileCreatePage.svelte

@@ -9,6 +9,7 @@
   import MobileEditorPage from './MobileEditorPage.svelte';
   import MobileConfirmSheet from './MobileConfirmSheet.svelte';
   import MobileOptionSheet from './MobileOptionSheet.svelte';
+  import { autoGrow, enterMovesFocus } from './autoGrowTextarea.js';
   import Avatar from '../components/Avatar.svelte';
   import {
     isCreateSystemFieldAutoManaged,
@@ -43,6 +44,7 @@
 
   let title = $state('');
   let description = $state('');
+  let descriptionField = $state(null);
   let workspaceId = $state(null);
   let itemTypeId = $state(null);
   let itemTypes = $state([]);
@@ -782,19 +784,23 @@
       {/if}
 
       <!-- Linear-style borderless hero fields: the title and description are
-           the form; properties live in the chip bar pinned at the bottom. -->
-      <input
+           the form; properties live in the chip bar pinned at the bottom.
+           The title textarea wraps and grows so long titles stay visible. -->
+      <textarea
         class="hero-title"
-        type="text"
         bind:value={title}
         placeholder={isPersonal ? 'Task title' : 'Issue title'}
         autocomplete="off"
+        rows={1}
         enterkeyhint="next"
+        use:autoGrow={title}
+        use:enterMovesFocus={{ next: descriptionField }}
         data-testid="create-title"
-      />
+      ></textarea>
       <textarea
         class="hero-desc"
         bind:value={description}
+        bind:this={descriptionField}
         rows={4}
         placeholder="Description…"
         data-testid="create-description"
@@ -1092,17 +1098,21 @@
   .create { display: flex; flex-direction: column; gap: 0.5rem; }
   .parent { margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--ds-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-  /* Linear-style borderless hero fields. */
+  /* Linear-style borderless hero fields. The title textarea wraps and grows
+     with its content (autoGrow action) so long titles stay fully visible. */
   .hero-title {
     width: 100%;
     margin: 0.75rem 0 0;
     padding: 0;
     border: none;
     background: transparent;
     color: var(--ds-text);
+    font-family: inherit;
     font-size: 1.35rem;
     font-weight: var(--font-semibold, 600);
     line-height: 1.25;
+    overflow: hidden;
+    resize: none;
   }
   .hero-title::placeholder { color: var(--ds-text-subtlest, var(--ds-text-subtle)); font-weight: var(--font-semibold, 600); }
   .hero-desc {

frontend/src/lib/mobile/MobileItemEditPage.svelte

@@ -5,6 +5,7 @@
   import { formatItemKey } from '../utils/itemKey.js';
   import MobileEditorPage from './MobileEditorPage.svelte';
   import MobileConfirmSheet from './MobileConfirmSheet.svelte';
+  import { autoGrow, enterMovesFocus } from './autoGrowTextarea.js';
   import { Loader } from '@lucide/svelte';
 
   /**
@@ -21,6 +22,7 @@
   let loadErrored = $state(false);
   let title = $state('');
   let description = $state('');
+  let descriptionField = $state(null);
   let saving = $state(false);
   let error = $state('');
 
@@ -176,18 +178,23 @@
     </div>
   {:else}
     <div class="edit-form" data-testid="item-edit-form">
-      <!-- Linear-style borderless hero fields. -->
-      <input
+      <!-- Linear-style borderless hero fields. The title is an auto-growing
+           textarea: long titles wrap instead of scrolling out of view. -->
+      <textarea
         class="hero-title"
-        type="text"
         bind:value={title}
         placeholder="Issue title"
         autocomplete="off"
+        rows={1}
+        enterkeyhint="next"
+        use:autoGrow={title}
+        use:enterMovesFocus={{ next: descriptionField }}
         data-testid="item-edit-title"
-      />
+      ></textarea>
       <textarea
         class="hero-desc"
         bind:value={description}
+        bind:this={descriptionField}
         rows={12}
         placeholder="Description…"
         data-testid="item-edit-description"
@@ -236,17 +243,21 @@
     gap: 0.5rem;
   }
 
-  /* Linear-style borderless hero fields. */
+  /* Linear-style borderless hero fields. The title textarea wraps and grows
+     with its content (autoGrow action) so long titles stay fully visible. */
   .hero-title {
     width: 100%;
     margin: 0.75rem 0 0;
     padding: 0;
     border: none;
     background: transparent;
     color: var(--ds-text);
+    font-family: inherit;
     font-size: 1.35rem;
     font-weight: var(--font-semibold, 600);
     line-height: 1.25;
+    overflow: hidden;
+    resize: none;
   }
   .hero-title::placeholder { color: var(--ds-text-subtlest, var(--ds-text-subtle)); font-weight: var(--font-semibold, 600); }
   .hero-desc {

frontend/src/lib/mobile/MobilePageDetail.svelte

@@ -8,11 +8,12 @@
   import { renderMarkdown } from '../utils/render-markdown.js';
   import SafeMarkdown from '../components/SafeMarkdown.svelte';
   import MobileHeader from './MobileHeader.svelte';
+  import { autoGrow, enterMovesFocus } from './autoGrowTextarea.js';
   import { pageAncestors, pageChildren } from './mobilePagesData.js';
 
   // Phone page reader: rendered markdown, breadcrumb, and sub-page rows.
-  // Editing is a plain markdown textarea (the Milkdown rich editor stays
-  // desktop-only) guarded by the page's content hash against lost updates.
+  // Editing is a borderless full-page form (same Linear-style hero fields as
+  // the item editors) guarded by the page's content hash against lost updates.
   let { workspaceId, pageId } = $props();
 
   let page = $state(null);
@@ -23,6 +24,7 @@
   let editing = $state(false);
   let draftTitle = $state('');
   let draftContent = $state('');
+  let draftContentField = $state(null);
   let saving = $state(false);
   // Guard in-place navigation (page → sub-page) against out-of-order loads.
   let loadToken = 0;
@@ -143,20 +145,28 @@
     <button class="retry" onclick={() => load(++loadToken)} disabled={loading} type="button">Retry</button>
   </div>
 {:else if editing}
+  <!-- Borderless Linear-style editor: hero title + content, actions pinned
+       to the bottom edge. Same modality as the item create/edit pages. -->
   <div class="editor" data-testid="mobile-page-editor">
-    <input
-      class="title-input"
+    <textarea
+      class="hero-title"
       bind:value={draftTitle}
+      rows={1}
+      enterkeyhint="next"
+      placeholder="Page title"
+      use:autoGrow={draftTitle}
+      use:enterMovesFocus={{ next: draftContentField }}
       data-testid="mobile-page-title-input"
       aria-label="Page title"
-      type="text"
-    />
+    ></textarea>
     <textarea
-      class="content-input"
+      class="hero-content"
       bind:value={draftContent}
+      bind:this={draftContentField}
       data-testid="mobile-page-content-input"
       aria-label="Page content (Markdown)"
       spellcheck="false"
+      placeholder="Write something…"
     ></textarea>
     <div class="editor-actions">
       <button class="btn secondary" onclick={cancelEditing} data-testid="mobile-page-editor-cancel" type="button">Cancel</button>
@@ -341,32 +351,57 @@
   }
   .sub-row :global(.chev) { color: var(--ds-icon-subtle, var(--ds-text-subtle)); flex-shrink: 0; }
 
-  .editor { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem 0.875rem 2rem; }
-  .title-input {
-    min-height: 44px;
-    padding: 0.4rem 0.6rem;
-    border: 1px solid var(--ds-border);
-    border-radius: var(--radius-lg, 8px);
-    background-color: var(--ds-surface-raised);
-    font-size: 1.125rem;
-    font-weight: var(--font-semibold, 600);
+  /* Borderless editor fields — same hero treatment as the item editors. */
+  .editor {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    box-sizing: border-box;
+    padding: 0.75rem 1rem 0;
+    gap: 0.5rem;
+  }
+  .hero-title {
+    width: 100%;
+    margin: 0.5rem 0 0;
+    padding: 0;
+    border: none;
+    background: transparent;
     color: var(--ds-text);
+    font-family: inherit;
+    font-size: 1.35rem;
+    font-weight: var(--font-semibold, 600);
+    line-height: 1.25;
+    overflow: hidden;
+    resize: none;
   }
-  .content-input {
-    min-height: 55dvh;
-    padding: 0.6rem;
-    border: 1px solid var(--ds-border);
-    border-radius: var(--radius-lg, 8px);
-    background-color: var(--ds-surface-raised);
-    font-family: var(--font-mono, monospace);
-    font-size: 0.875rem;
-    line-height: 1.5;
+  .hero-title::placeholder { color: var(--ds-text-subtlest, var(--ds-text-subtle)); font-weight: var(--font-semibold, 600); }
+  .hero-content {
+    width: 100%;
+    min-height: 50dvh;
+    padding: 0;
+    border: none;
+    background: transparent;
     color: var(--ds-text);
-    resize: vertical;
+    font-family: inherit;
+    font-size: max(1rem, 16px);
+    line-height: 1.55;
+    resize: none;
+  }
+  .hero-content::placeholder { color: var(--ds-text-subtlest, var(--ds-text-subtle)); }
+  .hero-title:focus,
+  .hero-content:focus { outline: none; }
+
+  .editor-actions {
+    position: sticky;
+    bottom: 0;
+    z-index: 20;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    margin-top: auto;
+    padding: 0.6rem 0 calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
+    background: linear-gradient(to top, var(--ds-surface) 65%, transparent);
   }
-  .title-input:focus,
-  .content-input:focus { outline: 2px solid var(--ds-interactive); outline-offset: -1px; }
-  .editor-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
   .btn {
     display: inline-flex;
     align-items: center;
@@ -380,12 +415,12 @@
     cursor: pointer;
   }
   .btn.secondary {
-    border: 1px solid var(--ds-border);
-    background: var(--ds-surface);
+    border: none;
+    background: var(--ds-background-neutral);
     color: var(--ds-text);
   }
   .btn.primary {
-    border: 1px solid var(--ds-interactive);
+    border: none;
     background: var(--ds-interactive);
     color: var(--ds-text-inverse, #fff);
   }