Lotus CIandClaude Opus 4.8
e36aef8aa3
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>
116 lines
2.3 KiB
CSS
116 lines
2.3 KiB
CSS
.raisedButton > svg {
|
||
color: var(--cpd-color-icon-on-solid-primary);
|
||
}
|
||
|
||
.reactionPopupMenu {
|
||
--reaction-button-padding: 10px;
|
||
--reaction-button-fontsize: 20px;
|
||
--reaction-button-gap: var(--cpd-separator-spacing);
|
||
display: flex;
|
||
width: fit-content;
|
||
}
|
||
|
||
@media (max-width: 420px) {
|
||
.reactionPopupMenu {
|
||
/* 20px glyph + 2×12px padding = a 44px square touch target. Five buttons
|
||
still fit a ~360px drawer row; previously these were ~32px. */
|
||
--reaction-button-padding: 12px;
|
||
--reaction-button-fontsize: 20px;
|
||
--reaction-button-gap: 6px;
|
||
}
|
||
}
|
||
|
||
div.reactionPopupMenuRoot.reactionPopupMenuModal {
|
||
--overlay-top: 82vh;
|
||
width: fit-content;
|
||
}
|
||
|
||
div.reactionPopupMenuRoot {
|
||
/* Center the drawer */
|
||
--inset-inline: 30em;
|
||
}
|
||
|
||
.reactionPopupMenuRoot > div {
|
||
width: fit-content;
|
||
max-width: 100vw;
|
||
}
|
||
|
||
div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
|
||
padding-inline: var(--cpd-space-6x);
|
||
padding-block: var(--cpd-space-6x);
|
||
}
|
||
|
||
.reactionPopupMenu section {
|
||
height: fit-content;
|
||
flex: 1;
|
||
max-width: fit-content;
|
||
}
|
||
|
||
.reactionPopupMenu section.reactionsMenuSection {
|
||
margin: auto 0;
|
||
flex: auto;
|
||
}
|
||
|
||
.reactionsMenu {
|
||
margin: 0;
|
||
padding: 0;
|
||
flex-grow: 1;
|
||
gap: var(--reaction-button-gap);
|
||
/* Height of 3 rows plus padding. */
|
||
max-height: calc(
|
||
((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3
|
||
);
|
||
max-width: calc(
|
||
((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 5
|
||
);
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
list-style: none;
|
||
flex-wrap: wrap;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
justify-content: start;
|
||
align-items: auto;
|
||
align-content: start;
|
||
width: fit-content;
|
||
}
|
||
|
||
.reactionsMenu > * {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.reactionButton {
|
||
padding: var(--reaction-button-padding);
|
||
border-radius: var(--cpd-radius-pill-effect);
|
||
font-size: var(--reaction-button-fontsize);
|
||
min-block-size: unset;
|
||
border: none;
|
||
aspect-ratio: 1 / 1;
|
||
height: 100%;
|
||
}
|
||
|
||
.verticalSeperator {
|
||
background-color: var(--cpd-color-gray-800);
|
||
width: 2px;
|
||
height: auto;
|
||
margin-left: var(--cpd-separator-spacing);
|
||
margin-right: var(--cpd-separator-spacing);
|
||
}
|
||
|
||
.alert {
|
||
margin-bottom: var(--cpd-space-3x);
|
||
animation: grow-in 200ms;
|
||
height: 2.5em;
|
||
}
|
||
|
||
@keyframes grow-in {
|
||
from {
|
||
height: 0;
|
||
}
|
||
|
||
to {
|
||
height: 2.5em;
|
||
}
|
||
}
|