fix(web): prevent iOS Safari auto-zoom on input focus

[bergholmm]

What Changed

Use text-[16px] sm:text-[14px] on the composer editor, its placeholder, and the sidebar thread rename input. This sets font size to 16px on mobile (< 640px) while preserving the original smaller sizes on desktop (≥ 640px).

Why

iOS Safari automatically zooms into any input/contenteditable element with font-size < 16px when focused. This breaks the viewport in mobile web/PWA — the user has to manually pinch-to-zoom back out after every interaction. 16px is the threshold that prevents this behavior.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Purely presentational Tailwind class tweaks; no logic, data, or security-sensitive code paths are changed.

Overview
Prevents iOS Safari’s focus auto-zoom by increasing the base font size to 16px on small screens for the ComposerPromptEditor contenteditable + placeholder and the sidebar thread rename input (keeping prior sizes via sm: overrides).

Also standardizes tooltip max-width styling in the composer mention/skill chips by switching from max-w-[30rem] to max-w-120.

^{Reviewed by Cursor Bugbot for commit 8aa0401. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Prevent iOS Safari auto-zoom on input focus in composer and sidebar

iOS Safari auto-zooms inputs with font sizes below 16px. This fix sets text size to text-base (16px) by default with a sm: breakpoint override restoring the original smaller size on larger screens.

• ComposerPromptEditor.tsx: editor and placeholder switch from text-[14px] to text-base sm:text-[14px]; break-words replaced with wrap-break-word
• Sidebar.tsx: thread rename input switches from text-xs to text-base sm:text-xs
• Tooltip max-width classes updated from max-w-[30rem] to max-w-120 in mention and skill decorators
• Behavioral Change: on mobile viewports, editor and rename input text renders at 16px instead of the previous smaller size

^{Macroscope summarized 8aa0401.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7e44bd20-ca1f-4e53-9a94-74f6e7287d07

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gameroman]

This looks better than #1292

[macroscopeapp]

Approvability

Verdict: Approved

Pure CSS changes implementing a standard iOS Safari auto-zoom prevention fix. Uses responsive text-base sm:text-[14px] pattern on input elements - a well-known mobile UX fix with no logic changes.

^{You can customize Macroscope's approvability policy. Learn more.}

Dismissing prior approval to re-evaluate 8aa0401