fix(app): keep the phone titlebar clear of the iOS status bar blur

[Hona]

Issue for this PR

N/A

Type of change

• Bug fix
• New feature
• Refactor / code improvement
• Documentation

What does this PR do?

In the Home Screen web app on iPhone (iOS 26+), the session title in the top titlebar is blurred and dimmed. iOS composites a blur over the band just below the status bar, above the web layer: the page's own render of that area is sharp. No CSS turns it off; native apps hide it with scrollView.topEdgeEffect.isHidden, which a web page cannot reach.

The titlebar row currently starts right at env(safe-area-inset-top), which is inside that band. This copies ChatGPT's phone header, which has the same setup (viewport-fit=cover, black-translucent). Its visible header gets this rule on phone widths:

@media (width <= 47.999rem) {
  /* .x1hn2jz0.x1hn2jz0.x1hn2jz0:where(...) on the visible <header> */
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

I traced this by loading chatgpt.com in headless WebKit with an iPhone profile and listing the rules that apply to the visible header (logged-out home page).

On web at phone width (max-width: 767px, same breakpoint) with the titlebar at the top, the titlebar now uses padding-top: calc(16px + env(safe-area-inset-top)) and grows by the same 16px. The inner row's max(0px, 8px - inset) top padding is dropped there, because the 16px already covers it. Desktop, wider web, and the bottom-titlebar position are unchanged.

Like ChatGPT's, the change also applies to phone-width Safari tabs, where there is no safe area: the titlebar goes from 36px to 44px.

How did you verify your code works?

• On an iPhone (iOS 27.0.1, Home Screen app), I applied this PR's computed titlebar styles to the running app through Web Inspector, and compared device screenshots with the page's own render row by row. iOS alters pixels down to about y=95 (CSS px) wherever content sits there. Average difference over the title: 22.3 before, 8.0 with this PR (the upper part of the text is still slightly soft), 0.16 at +24px, 0.01 at +32px. I kept +16px to match ChatGPT and limit the added height.
• Taps sent through iPhone Mirroring reach the page from y=60 down. y=0-59 (the safe area) never reaches the page, so the titlebar row is tappable before and after; this change is visual only.
• I added titlebar padding-top / height assertions to the top-navigation case in e2e/regression/mobile-session.spec.ts. Both positions pass with this change; the top case fails without it (0px instead of 16px).
• bun run check passes (lint and typecheck).

Screenshots / recordings

Before:

After:

Checklist

• I have tested my changes locally
• I have not included unrelated changes in this PR

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.