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>
* Fix issues detected by Knip
Including cleaning up some unused code and dependencies, using a React hook that we unintentionally stopped using, and also adding some previously undeclared dependencies.
* Replace remaining React ARIA components with Compound components
* fix button position
* disable scrollbars to resolve overlapping button
---------
Co-authored-by: Timo <toger5@hotmail.de>
This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
As a first step towards adopting the Compound design system and the new Element Call designs, this pulls in Compound's color tokens and applies them to all existing components. I've tried to choose tokens based on the semantics of where they're used, but in some cases, where the new and old design systems differ in semantics, it was necessary to choose tokens based on their resulting color. These hacks can be removed as we implement more of the new designs.
There were a set of environment variables that we used for custom themes, but Compound has way too many design tokens for that approach to still be a good idea, so I decided to replace them all with a single environment variable that just lets you write arbitrary custom CSS.
Lotus CIandClaude Opus 4.8
Hugh Nimmo-Smith
fkwp
RobinandTimo
Šimon Brandner
David Baker
Robert Long