fix(lotus): in-call mobile UI fixes (EC audit wave-2)
CI / Build embedded bundle (push) Successful in 44s
CI / Publish to Gitea npm registry (push) Has been skipped

3-agent survey of the in-call UI at phone width + 2-agent review of the
staged diff. All changes are mobile-gated CSS (mobile-first @media on
Compound tokens), so desktop rendering is provably unchanged.

- CallFooter: wrap the control row and tighten gap/padding at <=500px so
  the buttons (incl. the destructive hangup) can never be clipped by the
  grid's overflow-x:hidden. A loudspeaker button was added to the bar
  without a shed rule, pushing 6-7 lg buttons past the viewport at
  320-500px.
- OneOnOnePortraitLayout: give the 1:1 self-view the same safe-area-aware
  inset as SpotlightExpandedLayout so it clears the home indicator /
  floating footer (was a bare 16px inset). Phone-only layout.
- GridTile: enlarge the always-visible camera-flip control to a 44px touch
  target on coarse pointers (was ~28px).
- ReactionToggleButton: enlarge reaction-picker emoji buttons to 44px at
  <=420px (were ~32px); five still fit a 360px drawer row.
- Tabs: scroll the horizontal tab row on the inline axis (overflow-x) so
  the Settings tabs don't clip in a phone drawer.
- SpotlightLandscapeLayout: shrink the 180px filmstrip rail to 132px on
  short landscape phones (max-height:400px) so the spotlight isn't a sliver.

Gates: tsc 0, prettier clean, affected vitest pass. No TS changed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Lotus CI
2026-07-19 01:08:43 -04:00
co-authored by Claude Opus 4.8
parent 0ffe247929
commit e36aef8aa3
6 changed files with 55 additions and 4 deletions
+14
View File
@@ -102,6 +102,20 @@ Once we exceed 500 we hide everything except the buttons.
@media (max-width: 500px) {
.footer {
grid-template-areas: "buttons buttons buttons";
/* Reclaim horizontal budget so the control row fits on phones. */
padding-left: calc(env(safe-area-inset-left) + var(--cpd-space-3x));
padding-right: calc(env(safe-area-inset-right) + var(--cpd-space-3x));
}
.buttons {
/* Fill the row and wrap instead of overflowing: on the narrowest phones the
control set (mic/video/loudspeaker/hangup) exceeds the viewport, and the
parent's overflow-x: hidden would otherwise clip the outer buttons —
including the destructive hangup. Wrapping keeps every control reachable. */
justify-self: stretch;
flex-wrap: wrap;
justify-content: center;
gap: var(--cpd-space-2x);
}
.settingsOnlyShowNarrow {