fix: let long page titles wrap in the page editor

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 ? (
               <>

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;

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();
+      }}
+    />
+  );
+}

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');
+});