From fc1d74b84ccaa50296f03bb7a7f3fc005e79f171 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Fri, 3 Apr 2026 19:59:09 +0200
Subject: [PATCH] fix: editor title wraps to multiple lines instead of overflow
 hidden

Converted the title field from <input> to <textarea> with auto-resize
so long titles wrap naturally onto multiple lines. The textarea grows
to fit content (via scrollHeight) and shrinks back when text is
removed. Added resize:none and overflow:hidden in CSS to suppress
the drag handle and scrollbar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Editor.css     |  3 +++
 src/components/TitleField.tsx | 17 ++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/Editor.css b/src/components/Editor.css
index 32404fcb..544f9ab9 100644
--- a/src/components/Editor.css
+++ b/src/components/Editor.css
@@ -333,6 +333,9 @@
   letter-spacing: var(--headings-h1-letter-spacing, -0.015em);
   color: var(--foreground);
   padding: 0;
+  resize: none;
+  overflow: hidden;
+  font-family: inherit;
 }
 
 .title-field__input::placeholder {
diff --git a/src/components/TitleField.tsx b/src/components/TitleField.tsx
index 6b500446..83c97780 100644
--- a/src/components/TitleField.tsx
+++ b/src/components/TitleField.tsx
@@ -62,11 +62,21 @@ function useOptimisticTitle(title: string, onTitleChange: (t: string) => void) {
  * Displays the title as an editable field and shows the resulting filename below.
  */
 export function TitleField({ title, filename, editable = true, notePath, vaultPath, onTitleChange }: TitleFieldProps) {
-  const inputRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
   const [isFocused, setIsFocused] = useState(false)
   const { value, isEditing, handleFocus, commitTitle, revert, setEdit } =
     useOptimisticTitle(title, onTitleChange)
 
+  // Auto-resize textarea to fit content
+  const autoResize = useCallback(() => {
+    const el = inputRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = el.scrollHeight + 'px'
+  }, [])
+
+  useEffect(() => { autoResize() }, [value, autoResize])
+
   useEffect(() => {
     const handler = (e: Event) => {
       const detail = (e as CustomEvent).detail
@@ -106,11 +116,12 @@ export function TitleField({ title, filename, editable = true, notePath, vaultPa
 
   return (
     <div className="title-field" data-testid="title-field">
-      <input
+      <textarea
         ref={inputRef}
         className="title-field__input"
         value={value}
-        onChange={e => setEdit(e.target.value)}
+        rows={1}
+        onChange={e => { setEdit(e.target.value); autoResize() }}
         onFocus={() => { setIsFocused(true); handleFocus() }}
         onBlur={() => { setIsFocused(false); commitTitle() }}
         onKeyDown={handleKeyDown}