Mobile UX — problems & fixes

Problem. On a 360px phone the centred brand block gets only 130px between the hamburger and the profile pill, so “COMMAND CENTER” and “GLOBAL INTELLIGENCE” each wrap to two lines and the brand’s right edge butts directly against the pill with zero gap. It reads as broken, not branded — and it’s worse on a 320px iPhone SE.

Fix. Below 380px: keep the brand on one line by trimming its letter-spacing, drop the “GLOBAL INTELLIGENCE” subtitle (it’s decorative, not load-bearing), and collapse the anonymous profile pill to a 32px icon-only chip. The full label + subtitle return at ≥380px. Frees ~80px and the brand never wraps.

Problem. The peek is a fixed 120px, but its header (handle + Briefing + DEFCON) is only ~64px — so the remaining ~56px reveals the FEED/ANALYST tab row and a hard-clipped sliver of the search box, cut off mid-field right at the footer line. The peek is supposed to show “Briefing + status only”; instead the seam looks like a rendering bug.

Fix. Make the peek a deliberate status bar: handle + Briefing + DEFCON/sync on one row, plus a right-aligned “Feed ⌃ 240” chevron that names the gesture. Clip the body exactly at the header bottom and add a short fade so nothing reads as cut. Tabs + search live only once the sheet is actually open.

Problem. The marketing-style footer (description sentence + four legal links) is pinned below the bottom sheet on the dashboard, permanently eating ~88px. Even fully expanded, the sheet’s “PULL FEEDS / last sync” row sits 11px above it, the description truncates mid-word (“…AI voice br…”), and at 360px the links wrap. It’s the single biggest source of cramping at the bottom.

Fix. The crawler/compliance requirement is that the Privacy + Terms links are present in SSR HTML and visible on mobile — not that the marketing blurb is. On the dashboard, collapse to a single ~30px line of links only (“Privacy · Terms · Pricing”). Keep the full descriptive footer on the marketing pages. Reclaims ~58px and removes the truncation + wrap.

Problem. The full-screen Settings (“Operator Console”) panel pins a bottom hint reading “Press Esc to close, or click outside.” On a phone there is no Esc key, and because the panel is full-width there is nothing “outside” to tap. The only real dismissal — the ✕ top-right — isn’t mentioned, so the instruction is both wrong and unhelpful.

Fix. Branch the hint on pointer type (coarse → touch). On touch: drop the Esc/outside line and add a full-width “Done” button at the bottom, in the thumb zone, alongside the existing ✕. Keyboard users keep the Esc hint.

Problem. Tapping a feed card expands its detail inline — but the expansion (and the only “SOURCE →” link) renders far down the sheet’s scroll. With the sheet at peek the detail lands ~370px below the fold, so a tap highlights a card the user can’t see and surfaces a link they can’t reach. It feels like the tap was ignored.

Fix. Tapping a card opens a dedicated detail sheet that slides up in view — title, outlet coverage, summary and a thumb-height SOURCE button — instead of an inline expand buried in the scroll. Immediate feedback, always in view, one tap to dismiss. Try it: