diff --git a/src/app/components/mobile-tabs-pager/style.css.ts b/src/app/components/mobile-tabs-pager/style.css.ts
index 2a55e46d..92a6e437 100644
--- a/src/app/components/mobile-tabs-pager/style.css.ts
+++ b/src/app/components/mobile-tabs-pager/style.css.ts
@@ -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