fix(mobile-tabs-pager): paint Background.OnContainer on pagerRoot so panes mounted outside PageRoot inherit readable text on native

This commit is contained in:
v.lagerev 2026-05-18 22:58:53 +03:00
parent eb29c28ff0
commit e9c3cc5ddc

View file

@ -15,6 +15,18 @@ import { color } from 'folds';
// (a) the inter-pane gap during a swipe — the gap colour the user
// asked for is "light blue same as the header", which IS this
// SurfaceVariant tone — and (b) any sub-pixel rounding seam at rest.
//
// `color: Background.OnContainer` mirrors what the route-level
// `<PageRoot>` would have set via its `ContainerColor({ variant:
// 'Background' })` wrapper. We mount Direct/Channels/Bots directly
// here, bypassing PageRoot for the swipe-pager experience, so without
// this declaration the form labels rendered inside the per-pane
// StreamHeader curtain (`<Text size="L400">` for Username/Server/
// Options) had `color: inherit` cascading all the way up to `body`,
// which sets no color → browser default black. The labels became
// invisible against the dark form background only on native (where the
// pager activates). Desktop / web go through PageRoot and inherit the
// expected light tone for free.
export const pagerRoot = style({
position: 'relative',
flex: '1 1 0',
@ -24,6 +36,7 @@ export const pagerRoot = style({
overflow: 'hidden',
touchAction: 'pan-y',
backgroundColor: color.SurfaceVariant.Container,
color: color.Background.OnContainer,
});
// Shared static tabs row painted ABOVE the strip. Reserves the