From 07e12b92d02ef5ef733636cc864a1443f887b87d Mon Sep 17 00:00:00 2001
From: Charan Rathore <180254320+charan-rathore@users.noreply.github.com>
Date: Sun, 4 Oct 2026 19:38:06 +0530
Subject: [PATCH 1/2] fix: let long page titles wrap in the page editor

The page title was a single-line input, so long titles were clipped at the right edge. Use an auto-growing textarea that wraps and strips pasted line breaks.
---
 src/client/PageDocument.tsx          | 11 +++------
 src/client/editor.css                |  5 ++++
 src/client/editor/PageTitleField.tsx | 36 ++++++++++++++++++++++++++++
 tests/page-title-field.test.tsx      | 25 +++++++++++++++++++
 4 files changed, 69 insertions(+), 8 deletions(-)
 create mode 100644 src/client/editor/PageTitleField.tsx
 create mode 100644 tests/page-title-field.test.tsx

diff --git a/src/client/PageDocument.tsx b/src/client/PageDocument.tsx
index 164b3bf8..da3e1045 100644
--- a/src/client/PageDocument.tsx
+++ b/src/client/PageDocument.tsx
@@ -19,6 +19,7 @@ import { api } from './api';
 import { usePageAutosave } from './editor/use-page-autosave';
 import { inspectMarkdown } from './editor/markdown';
 import { DocumentMenu } from './editor/DocumentMenu';
+import { PageTitleField } from './editor/PageTitleField';
 import { PageConversation } from './PageConversation';
 const RichEditor = lazy(() => import('./editor/RichEditor'));
 export function PageDocument({
@@ -260,15 +261,9 @@ export function PageDocument({
                 <button onClick={() => setMove(false)}>Done</button>
               </div>
             )}
-            <input
-              className="document-title"
-              aria-label="Page title"
-              placeholder="Untitled page"
-              maxLength={160}
+            <PageTitleField
               value={draft.title}
-              onChange={(event) =>
-                controller.edit({ title: event.target.value })
-              }
+              onChange={(title) => controller.edit({ title })}
             />
             {sourceMode ? (
               <>
diff --git a/src/client/editor.css b/src/client/editor.css
index 9c9c91af..1c630149 100644
--- a/src/client/editor.css
+++ b/src/client/editor.css
@@ -397,6 +397,11 @@
   margin-bottom: 24px;
   outline: none;
   border-radius: 0;
+  display: block;
+  resize: none;
+  overflow: hidden;
+  font-family: inherit;
+  overflow-wrap: anywhere;
 }
 .document-title::placeholder {
   color: #747c70;
diff --git a/src/client/editor/PageTitleField.tsx b/src/client/editor/PageTitleField.tsx
new file mode 100644
index 00000000..e840cc1b
--- /dev/null
+++ b/src/client/editor/PageTitleField.tsx
@@ -0,0 +1,36 @@
+import { useLayoutEffect, useRef } from 'react';
+
+export function singleLineTitle(value: string): string {
+  return value.replace(/[\r\n]+/g, ' ');
+}
+
+export function PageTitleField({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (title: string) => void;
+}) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+  return (
+    <textarea
+      ref={ref}
+      className="document-title"
+      aria-label="Page title"
+      placeholder="Untitled page"
+      maxLength={160}
+      rows={1}
+      value={value}
+      onChange={(event) => onChange(singleLineTitle(event.target.value))}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') event.preventDefault();
+      }}
+    />
+  );
+}
diff --git a/tests/page-title-field.test.tsx b/tests/page-title-field.test.tsx
new file mode 100644
index 00000000..66dd1c84
--- /dev/null
+++ b/tests/page-title-field.test.tsx
@@ -0,0 +1,25 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect, it } from 'vitest';
+import {
+  PageTitleField,
+  singleLineTitle,
+} from '../src/client/editor/PageTitleField';
+
+it('renders the page title as a wrapping textarea so long titles are not clipped', () => {
+  const html = renderToStaticMarkup(
+    <PageTitleField
+      value="AI Coworkers: OpenAI Dots vs Meta Muse vs OpenDots"
+      onChange={() => {}}
+    />,
+  );
+  expect(html).toContain('<textarea');
+  expect(html).toContain('aria-label="Page title"');
+  expect(html).toContain('rows="1"');
+  expect(html).toContain('maxLength="160"');
+  expect(html).toContain('AI Coworkers: OpenAI Dots vs Meta Muse vs OpenDots');
+});
+
+it('keeps the title on a single logical line when text with line breaks is pasted', () => {
+  expect(singleLineTitle('First\nSecond\r\nThird')).toBe('First Second Third');
+  expect(singleLineTitle('Plain title')).toBe('Plain title');
+});

From f3df1af3819a4d1263a5940281079db1efd4d371 Mon Sep 17 00:00:00 2001
From: Charan Rathore <180254320+charan-rathore@users.noreply.github.com>
Date: Wed, 7 Oct 2026 13:29:48 +0530
Subject: [PATCH 2/2] fix: recalculate the title field height when its width
 changes

The autosize effect only ran on value changes, so resizing the viewport
or panel left the fitted height stale and overflow:hidden clipped the
last wrapped line. Observe the textarea with a ResizeObserver and refit
on width changes. Adds a Chromium browser regression covering the
1440px to 375px shrink from the review.

Signed-off-by: Charan Rathore <180254320+charan-rathore@users.noreply.github.com>
---
 src/client/editor/PageTitleField.tsx   | 13 +++-
 tests/page-title-field.browser.test.ts | 82 ++++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 tests/page-title-field.browser.test.ts

diff --git a/src/client/editor/PageTitleField.tsx b/src/client/editor/PageTitleField.tsx
index e840cc1b..a4dfbd88 100644
--- a/src/client/editor/PageTitleField.tsx
+++ b/src/client/editor/PageTitleField.tsx
@@ -15,8 +15,17 @@ export function PageTitleField({
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = `${el.scrollHeight}px`;
+    const fitToContent = () => {
+      el.style.height = 'auto';
+      el.style.height = `${el.scrollHeight}px`;
+    };
+    fitToContent();
+    // Text wraps differently when the field's width changes (viewport or
+    // panel resize), so the fitted height must be recalculated then too,
+    // not only when the value changes.
+    const observer = new ResizeObserver(fitToContent);
+    observer.observe(el);
+    return () => observer.disconnect();
   }, [value]);
   return (
     <textarea
diff --git a/tests/page-title-field.browser.test.ts b/tests/page-title-field.browser.test.ts
new file mode 100644
index 00000000..eed9b9be
--- /dev/null
+++ b/tests/page-title-field.browser.test.ts
@@ -0,0 +1,82 @@
+// Browser regression: the fitted title height must follow width changes.
+// Uses esbuild to bundle the real component and Playwright Chromium for real
+// layout, since SSR or jsdom cannot reproduce textarea wrapping/clipping.
+import { buildSync } from 'esbuild';
+import { mkdtempSync, readFileSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { chromium } from 'playwright';
+import { expect, it } from 'vitest';
+
+const LONG_TITLE =
+  'AI Coworkers: OpenAI Dots vs Meta Muse vs OpenDots compared in depth';
+
+function buildHarness(): string {
+  const dir = mkdtempSync(join(tmpdir(), 'title-field-'));
+  const entry = join(dir, 'entry.tsx');
+  writeFileSync(
+    entry,
+    `import { createRoot } from 'react-dom/client';
+import { PageTitleField } from '${join(process.cwd(), 'src/client/editor/PageTitleField')}';
+createRoot(document.getElementById('root')!).render(
+  <div style={{ width: '100%' }}>
+    <PageTitleField value=${JSON.stringify(LONG_TITLE)} onChange={() => {}} />
+  </div>,
+);
+`,
+  );
+  const bundle = join(dir, 'bundle.js');
+  buildSync({
+    entryPoints: [entry],
+    outfile: bundle,
+    bundle: true,
+    format: 'iife',
+    jsx: 'automatic',
+    logLevel: 'silent',
+    nodePaths: [join(process.cwd(), 'node_modules')],
+  });
+  const css = readFileSync(
+    join(process.cwd(), 'src/client/editor.css'),
+    'utf8',
+  );
+  const titleRule =
+    css.match(/\.document-title\s*\{[^}]*\}/)?.[0] ??
+    (() => {
+      throw new Error('document-title rule not found');
+    })();
+  return `<!doctype html><html><head><style>
+body { margin: 0; font-family: sans-serif; }
+${titleRule}
+</style></head><body><div id="root"></div><script>${readFileSync(bundle, 'utf8')}</script></body></html>`;
+}
+
+it('recalculates the fitted title height when the field width shrinks', async () => {
+  const browser = await chromium.launch();
+  try {
+    const page = await browser.newPage({
+      viewport: { width: 1440, height: 900 },
+    });
+    await page.setContent(buildHarness());
+    const field = page.locator('.document-title');
+    await field.waitFor();
+    const before = await field.evaluate((el) => ({
+      client: el.clientHeight,
+      scroll: el.scrollHeight,
+    }));
+    expect(before.scroll).toBeLessThanOrEqual(before.client);
+
+    await page.setViewportSize({ width: 375, height: 900 });
+    // Give the observer a couple of frames to deliver the resize.
+    await page.waitForTimeout(200);
+    const after = await field.evaluate((el) => ({
+      client: el.clientHeight,
+      scroll: el.scrollHeight,
+    }));
+    // Narrower field wraps the title onto more lines, so the fitted height
+    // must grow; if it stays stale, overflow:hidden clips the last line.
+    expect(after.scroll).toBeGreaterThan(before.scroll);
+    expect(after.client).toBeGreaterThanOrEqual(after.scroll);
+  } finally {
+    await browser.close();
+  }
+}, 60_000);