fix title textarea auto-height for firefox and improve sync reliability

[moehdotdev]

the problem:

field-sizing: content is chrome-only. on firefox, the title textarea wouldn't grow as you typed it stayed at one line. the previous attempt at a firefox fallback used height: auto !important + overflow: hidden !important in css, which caused layout jank and didn't reliably sync on mount or when switching notes.

what changed:

ref strategy:
replaced the plain useRef<HTMLTextAreaElement> (titleRef) with a callback ref (setTitleRef) using useCallback. this lets us:

• call syncHeight immediately when the element mounts (before any react render cycle)
• attach a native input event listener directly on the element for real-time height sync as the user types, bypassing react's synthetic event batching

syncHeight function:
the height sync logic was updated from:

el.style.height = "auto";
el.style.height = `${el.scrollHeight}px`;

to:

el.style.minHeight = "0";
el.style.height = "0";
el.style.height = `${el.scrollHeight}px`;

resetting to 0 instead of auto gives a more reliable scroll height read on firefox, where auto can return a stale value before the browser recalculates layout.

manual sync on noteId/editedTitle change:
kept the useEffect that calls syncHeight when noteId or editedTitle changes, so switching notes correctly resizes the textarea to match the incoming title.

stableNote async sync:
added a useEffect to set editedTitle from stableNote.title if the title is still empty when data arrives. this handles the case where the note loads after initial render and the textarea would otherwise stay blank.

onChange handler:
removed the manual syncHeight(e.target) call from onChange since the native input listener on the ref now handles this. this avoids double-calling sync.

css cleanup:

• removed height: auto !important and overflow: hidden !important from textarea.field-sizing-content — these were the source of the jank
• removed explanatory comments from .field-sizing-content utility class that are no longer needed

textarea classnames:

• replaced whitespace-pre-wrap [overflow-wrap:anywhere] with [white-space:pre-wrap] [overflow-wrap:break-word] [word-break:break-word] for more explicit control and better cross-browser wrapping
• added overflow: hidden and width: 100% to inline styles to prevent any scrollbar flash during height recalc
• added overflow-hidden to the wrapper div to clip any overflow during transitions
• field-sizing-content kept for chrome; js height sync handles firefox

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
notevo	Ready	Preview, Comment	Jun 16, 2026 6:42am