replace custom useAutoSize hook with native field-sizing: content

[moehdotdev]

replace custom useAutoSize hook with native field-sizing: content

---

what changed

removed useAutoSize hook
deleted the custom useAutoSize hook that used a hidden mirror <span> to measure text width and manually set input/textarea widths. it also created container refs that had to be threaded through to every rename input.

added field-sizing-content and width-fit-content utilities
added two new utilities in globals.css:

• .field-sizing-content sets field-sizing: content so inputs and textareas naturally shrink/grow to fit their content (native browser behavior)
• .width-fit-content sets width: fit-content as a companion for elements that need it

updated all rename inputs
every inline rename input that used useAutoSize now uses field-sizing-content width-fit-content min-w-fit max-w-full (or max-w-[220px] for tab names) instead:

• workspace name input in WorkingSpacePageClient
• table tab rename input
• workspace card name input in HomePageClient
• grid note card textarea
• list note card input

removed container refs
all the nameContainerRef, tabContainerRef, gridContainerRef, listContainerRef refs that existed solely to pass max-width bounds to useAutoSize are gone. also removed useLayoutEffect import since it was only used by the hook.

misc

• pr-8 removed from workspace card title hover border (wasn't needed)
• search input gets mt-0.5 for alignment
• w-full sm:w-auto on the filter controls changed to w-auto
• trailing whitespace and hover:px-2 removed from list note title

---

why

field-sizing: content is now well-supported and does exactly what the custom hook did, with zero js. the old approach was fragile (sync issues, extra dom elements) and added complexity to every component that needed auto-sizing.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
notevo	Building	Preview, Comment	Apr 30, 2026 8:29am