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>
34 lines
834 B
CSS
34 lines
834 B
CSS
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
.tabContainer {
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tabList {
|
|
/* The tab row is horizontal, so scroll along the inline axis when the tabs
|
|
exceed the width (e.g. the Settings modal as a phone drawer). The prior
|
|
overflow-y:auto expressed the wrong axis; make the horizontal intent
|
|
explicit and hide the scrollbar. */
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
max-width: 100%;
|
|
|
|
/*no scrollbars*/
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE 10+ */
|
|
}
|
|
|
|
.tabList::-webkit-scrollbar {
|
|
/*no scrollbars*/
|
|
background: transparent; /* Chrome/Safari/Webkit */
|
|
width: 0px;
|
|
height: 0px;
|
|
}
|