iOS web app paper cuts: input auto-zoom and sticky :hover on touch

TL;DR

Two one-line CSS fixes would make claude.ai/code feel native on iOS:

| # | Bug | Fix |
|---|---|---|
| 1 | Prompt input auto-zooms on focus because font-size: var(--text-heading) computes to < 16px | Bump to 16px on touch (or at the mobile breakpoint) |
| 2 | Buttons/interactive elements need 2–3 taps because :hover is applied unconditionally | Gate hover styles behind @media (hover: hover) and (pointer: fine) |

Context

I use Claude on iOS via claude.ai/code saved as a home-screen bookmark rather than the native iOS app, because the native app only supports one signed-in account at a time — and I need to switch between a personal account and my work (Elastic) enterprise account constantly. (Aside: I've also been locked out of the enterprise account on iOS for ~3 weeks due to an Okta issue, which pushed me to the web fully.)

The web version works great overall, but there are two small mobile paper cuts that would be trivial to fix.

---

1. Prompt input triggers iOS auto-zoom on focus

Repro: Open claude.ai/code on iOS Safari, tap the prompt input.
Actual: Safari auto-zooms the page in when the input takes focus (well-known iOS behavior when a focused input has font-size < 16px).
Expected: No zoom.

Root cause (confirmed in Web Inspector): the prompt input (.tiptap.ProseMirror, inside .epitaxy-prompt-input) resolves its font-size from var(--text-heading), which on the mobile breakpoint computes to less than 16px.

Suggested fix: either bump --text-heading to 16px at the mobile breakpoint, or add a touch-device override on the input itself:

@media (pointer: coarse) {
  .epitaxy-prompt-input .tiptap { font-size: 16px; }
}

Before / after

<table>
<tr>
<th>Before — tap zooms the page in</th>
<th>After — bumping font-size to 16px, no zoom</th>
</tr>
<tr>
<td width="300"><a href="https://pub-6b50802d113345dea50c783e8280b53e.r2.dev/artifacts/20260712/gmosrsqb-before-trimmed.mp4"><img src="https://pub-6b50802d113345dea50c783e8280b53e.r2.dev/artifacts/20260712/b01zq76z-before-thumb.jpg" width="280"><br>▶ Watch video</a></td>
<td width="300"><a href="https://pub-6b50802d113345dea50c783e8280b53e.r2.dev/artifacts/20260712/62498mrr-ScreenRecording_07-12-2026%2015-50-41_1.MP4"><img src="https://pub-6b50802d113345dea50c783e8280b53e.r2.dev/artifacts/20260712/2y3oc3l6-thumb2.jpg" width="280"><br>▶ Watch video</a></td>
</tr>
</table>

Supporting evidence

<table>
<tr>
<th>Focused input (page just zoomed in)</th>
<th>Web Inspector — <code>font-size: var(--text-heading)</code></th>
</tr>
<tr>
<td width="300"><img src="https://pub-6b50802d113345dea50c783e8280b53e.r2.dev/artifacts/20260712/314l9opa-IMG_9650.PNG" width="280"></td>
<td width="420"><img src="https://pub-6b50802d113345dea50c783e8280b53e.r2.dev/artifacts/20260712/mv9cwt92-Screenshot%202026-07-12%20at%2015.51.43.png" width="400"></td>
</tr>
</table>

---

2. Interactive elements need two or three taps because of :hover styles

Repro: On iOS Safari, tap buttons / interactive UI elements in the app (menu items, session cards, controls, etc.).
Actual: First tap only reveals the hover state; a second (sometimes third) tap is required to actually activate the element.
Expected: Single tap activates.

Root cause: classic mobile-Safari behavior when hover styles are defined unconditionally — the first touch is consumed to "apply" the hover, and the click doesn't fire until the next tap.

Suggested fix: gate hover styles behind @media (hover: hover) and (pointer: fine) so touch devices skip them entirely:

@media (hover: hover) and (pointer: fine) {
  .some-element:hover { /* … */ }
}

Doing this repo-wide (or at least on the Tailwind hover variant preset) fixes the whole class of two-tap issues in one go. (No video captured for this one — happens throughout the app on any element with a hover style.)

---

Environment

• iOS Safari (home-screen bookmark to claude.ai/code)
• iPhone, current iOS

Both are one-liner CSS fixes and would meaningfully improve the iOS web experience for anyone who — like me — juggles multiple accounts and lives in the web app.