Fix mobile header layout

[jpers1]

Summary

• make the three header columns behave predictably at the existing 680px mobile breakpoint
• keep the book title on one truncated line without overlapping the home or user controls
• hide only the verbose user label on mobile while retaining the avatar and dropdown
• add desktop Chromium and mobile WebKit regression coverage with layout measurements and runtime screenshots

Root cause

The header grid did not give its center column a shrinkable track, and the full user label continued to consume width on narrow screens. Long book titles could therefore collide with adjacent controls or widen the layout. The mobile rule now uses auto minmax(0, 1fr) auto, constrains the title to one ellipsized line, and hides the verbose label while preserving the user control. Desktop behavior is unchanged.

Scope

This PR addresses only narrow-screen header geometry. It does not include the separate ExpandingSideImg fix and does not address broader document-level horizontal overflow. Mobile WebKit coverage uses Playwright iPhone 13 emulation, not a physical Safari device.

Validation

• yarn install --frozen-lockfile
• yarn test:e2e (2 passed: desktop Chromium and mobile WebKit)
• yarn test:e2e:mobile (1 passed)
• yarn build
• yarn check-translations
• git diff --check

At a 390 CSS-pixel viewport, the regression records a 390-pixel header, a single painted title line, no home/title overlap, the avatar fully inside the header, the verbose user label hidden, and no fixture-level horizontal overflow.