diff --git a/apps/mobile/src/app/(app)/(tabs)/_layout.tsx b/apps/mobile/src/app/(app)/(tabs)/_layout.tsx
index 119f6a8bc9..1cbe6eb571 100644
--- a/apps/mobile/src/app/(app)/(tabs)/_layout.tsx
+++ b/apps/mobile/src/app/(app)/(tabs)/_layout.tsx
@@ -10,6 +10,7 @@ import { StateSurfaceInsets } from '@/components/centered-state-surface';
 import { TabBarButton } from '@/components/tab-bar-button';
 import { TabBarLabel } from '@/components/tab-bar-label';
 import { BlurBar } from '@/components/ui/blur-bar';
+import { Text } from '@/components/ui/text';
 import { FEATURE_FLAG_QUICK_CHAT, useFeatureFlag } from '@/lib/analytics/posthog';
 import { usePendingAppAction } from '@/lib/app-actions/use-pending-app-action';
 import { PROFILE_TAB_ROOT } from '@/lib/finding-detail-back';
@@ -30,9 +31,11 @@ import {
   getTabBarIconSize,
   shouldHideTabBar,
   shouldShowTabLabel,
+  TAB_LABEL_MINIMUM_FONT_SCALE,
   TAB_LABEL_WRAP_FONT_SCALE,
   tabAccessibilityLabel,
   tabBarPosition,
+  tabLabelLineCount,
   visibleTabCount,
 } from '@/lib/tab-bar-layout';
 
@@ -56,6 +59,48 @@ function TabBarBackground() {
   );
 }
 
+/**
+ * One tab label, on the lines the bar reserves for it (`tabLabelLineCount`).
+ * On the single reserved line a label too wide for its tab would wrap into a
+ * second line the bar has no height for and render clipped at the bar's edge
+ * ("PROFIL E" at 160 dp, e1, 2026-09-21), so the label is pinned to one line and
+ * asks the platform to shrink it to fit (`adjustsFontSizeToFit`, implemented on
+ * both iOS and Android) and to tail-truncate whatever still overflows. That
+ * shrink is a residual guard, not the legibility rule: the window-width rule
+ * (`shouldShowTabLabel`) drops the labels whenever a full-size label would not
+ * fit its tab, so a label that renders never has to shrink that far on either
+ * platform. `minimumFontScale` caps the residual shrink on iOS only — Android's
+ * Fabric autosize floors at RN's own platform minimum. Where the bar does
+ * reserve a second line (the wrap font scale) the shared `TabBarLabel` renders
+ * it: the two-line copy that carries its own break, and one truncated line for
+ * every other label.
+ */
+function TabLabel({
+  label,
+  focused,
+  allowWrap,
+}: Readonly<{ label: string; focused: boolean; allowWrap: boolean }>) {
+  if (allowWrap) {
+    return <TabBarLabel label={label} focused={focused} />;
+  }
+  return (
+    <Text
+      accessible={false}
+      className={
+        focused
+          ? 'w-full text-center font-mono-medium text-[11px] leading-4 uppercase tracking-[0.2px] text-foreground'
+          : 'w-full text-center font-mono-medium text-[11px] leading-4 uppercase tracking-[0.2px] text-muted-foreground'
+      }
+      numberOfLines={1}
+      adjustsFontSizeToFit
+      minimumFontScale={TAB_LABEL_MINIMUM_FONT_SCALE}
+      ellipsizeMode="tail"
+    >
+      {label}
+    </Text>
+  );
+}
+
 export default function TabsLayout() {
   const router = useRouter();
   const pathname = usePathname();
@@ -63,6 +108,8 @@ export default function TabsLayout() {
   const colors = useThemeColors();
   const { bottom, left, right } = useSafeAreaInsets();
   const { width, fontScale } = useWindowDimensions();
+  const tabLabelLines = tabLabelLineCount(fontScale);
+  const allowLabelWrap = tabLabelLines > 1;
   const hideTabs = shouldHideTabBar(pathname);
   const showKiloClawTab = useKiloClawTabVisible();
   const showQuickChatTab = useFeatureFlag(FEATURE_FLAG_QUICK_CHAT, false);
@@ -205,7 +252,9 @@ export default function TabsLayout() {
               tabBarPosition('home', tabFlags) ?? 1,
               tabCount
             ),
-            tabBarLabel: ({ focused }) => <TabBarLabel label={homeLabel} focused={focused} />,
+            tabBarLabel: ({ focused }) => (
+              <TabLabel label={homeLabel} focused={focused} allowWrap={allowLabelWrap} />
+            ),
             tabBarIcon: ({ color, focused }) => (
               <House size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
             ),
@@ -225,7 +274,9 @@ export default function TabsLayout() {
             // The pre-wrapped copy is chosen once, from the same font scale the
             // width decision measures, so `tabLabels` and the rendered label
             // cannot disagree about which string is on the bar.
-            tabBarLabel: ({ focused }) => <TabBarLabel label={kiloclawLabel} focused={focused} />,
+            tabBarLabel: ({ focused }) => (
+              <TabLabel label={kiloclawLabel} focused={focused} allowWrap={allowLabelWrap} />
+            ),
             tabBarIcon: ({ color, focused }) => (
               <MessageSquare size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
             ),
@@ -250,7 +301,9 @@ export default function TabsLayout() {
               tabBarPosition('agents', tabFlags) ?? 2,
               tabCount
             ),
-            tabBarLabel: ({ focused }) => <TabBarLabel label={agentsLabel} focused={focused} />,
+            tabBarLabel: ({ focused }) => (
+              <TabLabel label={agentsLabel} focused={focused} allowWrap={allowLabelWrap} />
+            ),
             tabBarIcon: ({ color, focused }) => (
               <Bot size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
             ),
@@ -267,7 +320,9 @@ export default function TabsLayout() {
               tabBarPosition('chat', tabFlags) ?? 3,
               tabCount
             ),
-            tabBarLabel: ({ focused }) => <TabBarLabel label={chatLabel} focused={focused} />,
+            tabBarLabel: ({ focused }) => (
+              <TabLabel label={chatLabel} focused={focused} allowWrap={allowLabelWrap} />
+            ),
             tabBarIcon: ({ color, focused }) => (
               <MessageCircle size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
             ),
@@ -283,7 +338,9 @@ export default function TabsLayout() {
               tabCount,
               tabCount
             ),
-            tabBarLabel: ({ focused }) => <TabBarLabel label={profileLabel} focused={focused} />,
+            tabBarLabel: ({ focused }) => (
+              <TabLabel label={profileLabel} focused={focused} allowWrap={allowLabelWrap} />
+            ),
             tabBarIcon: ({ color, focused }) => (
               <UserRound size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
             ),
diff --git a/apps/mobile/src/components/add-credits-row.mounted.test.tsx b/apps/mobile/src/components/add-credits-row.mounted.test.tsx
new file mode 100644
index 0000000000..cb5a59b0b7
--- /dev/null
+++ b/apps/mobile/src/components/add-credits-row.mounted.test.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable typescript-eslint/no-deprecated -- DOM-free mounted React Native layout regression tests. */
+import { createElement, type ElementType } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { act, TestRenderer } from '@/test/renderer';
+
+import { AddCreditsRow } from './add-credits-row';
+
+const windowDims = vi.hoisted(() => ({ width: 390, height: 844, fontScale: 1, scale: 2 }));
+const platform = vi.hoisted(() => ({ OS: 'android' as string }));
+
+vi.mock('react-native', () => ({
+  Platform: platform,
+  View: 'View',
+  useWindowDimensions: () => windowDims,
+}));
+vi.mock('@/components/ui/text', () => ({ Text: 'Text' }));
+vi.mock('@/components/ui/button', () => ({ Button: 'Button' }));
+vi.mock('@/lib/external-link', () => ({ openExternalUrl: vi.fn() }));
+
+const BUTTON = 'Button' as ElementType;
+
+let renderer: TestRenderer.ReactTestRenderer | undefined = undefined;
+
+function renderRow() {
+  act(() => {
+    const element = createElement(AddCreditsRow, { url: 'https://example.com/credits' });
+    if (renderer) {
+      renderer.update(element);
+    } else {
+      renderer = TestRenderer.create(element);
+    }
+  });
+  if (!renderer) {
+    throw new Error('Missing AddCreditsRow renderer');
+  }
+  return renderer.root;
+}
+
+/** The row's only View: the container the copy and the button sit in. */
+function containerClasses(root: TestRenderer.ReactTestInstance): string[] {
+  return String(root.find(node => Object.is(node.type, 'View')).props.className).split(' ');
+}
+
+afterEach(() => {
+  act(() => renderer?.unmount());
+  renderer = undefined;
+  windowDims.width = 390;
+  platform.OS = 'android';
+});
+
+describe('AddCreditsRow mounted layout', () => {
+  // At 160 dp the "Add credits" button kept its natural width beside the copy
+  // and collapsed the description to a one-letter column ("A", e1, 2026-09-21).
+  it('stacks the copy above a full-width button in a narrow window', () => {
+    windowDims.width = 160;
+    const root = renderRow();
+    expect(containerClasses(root)).toContain('gap-2');
+    expect(containerClasses(root)).not.toContain('flex-row');
+    expect(String(root.findByType(BUTTON).props.className).split(' ')).toContain('w-full');
+  });
+
+  it('keeps the copy and the button on one row at phone widths', () => {
+    const root = renderRow();
+    expect(containerClasses(root)).toEqual(
+      expect.arrayContaining(['flex-row', 'items-center', 'justify-between'])
+    );
+    expect(String(root.findByType(BUTTON).props.className)).not.toContain('w-full');
+  });
+
+  it('renders nothing on iOS', () => {
+    platform.OS = 'ios';
+    expect(renderRow().findAllByType(BUTTON)).toHaveLength(0);
+  });
+});
diff --git a/apps/mobile/src/components/add-credits-row.tsx b/apps/mobile/src/components/add-credits-row.tsx
index c60863f328..65c4cf7537 100644
--- a/apps/mobile/src/components/add-credits-row.tsx
+++ b/apps/mobile/src/components/add-credits-row.tsx
@@ -1,9 +1,10 @@
 import { useTranslation } from 'react-i18next';
-import { Platform, View } from 'react-native';
+import { Platform, useWindowDimensions, View } from 'react-native';
 
 import { Button } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { openExternalUrl } from '@/lib/external-link';
+import { isNarrowLayout } from '@/lib/narrow-layout';
 import { cn } from '@/lib/utils';
 
 type AddCreditsRowProps = Readonly<{
@@ -14,6 +15,11 @@ type AddCreditsRowProps = Readonly<{
 /** Zero-balance CTA row: muted copy + an "Add credits" button to the web billing page. */
 export function AddCreditsRow({ url, className }: AddCreditsRowProps) {
   const { t } = useTranslation();
+  const { width } = useWindowDimensions();
+  // The button keeps its natural width, so in a narrow window the description
+  // beside it collapses to a column of single letters ("A", 160 dp, e1,
+  // 2026-09-21). Stacking gives the copy the row's full width.
+  const narrow = isNarrowLayout(width);
   // App Store review: iOS must not show an in-app CTA that opens an external
   // purchase/billing page. Credits are managed on the web there, so this row is
   // Android-only — gate it here so no call site can surface it on iOS.
@@ -21,13 +27,14 @@ export function AddCreditsRow({ url, className }: AddCreditsRowProps) {
     return null;
   }
   return (
-    <View className={cn('flex-row items-center justify-between', className)}>
-      <Text className="flex-1 pr-3 text-xs text-muted-foreground">
+    <View className={cn(narrow ? 'gap-2' : 'flex-row items-center justify-between', className)}>
+      <Text className={cn(narrow ? undefined : 'flex-1 pr-3', 'text-xs text-muted-foreground')}>
         {t('addCredits.description')}
       </Text>
       <Button
         size="sm"
         variant="outline"
+        className={narrow ? 'w-full' : undefined}
         onPress={() => {
           void openExternalUrl(url, { label: t('addCredits.billingPage') });
         }}
diff --git a/apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx b/apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx
new file mode 100644
index 0000000000..f2cb1728cf
--- /dev/null
+++ b/apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx
@@ -0,0 +1,243 @@
+import { createElement } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { act, TestRenderer } from '@/test/renderer';
+
+import { KiloPassSubscriptionCard } from './kilo-pass-subscription-card';
+
+const windowDims = vi.hoisted(() => ({ width: 390, height: 844, fontScale: 1, scale: 2 }));
+
+const invalidateQueries = vi.hoisted(() => vi.fn());
+
+type CardContent = {
+  kind: string;
+  state?: { title: string; description: string; action: string; actionLabel: string };
+};
+
+const cardState = vi.hoisted(() => {
+  const card: CardContent = {
+    kind: 'card',
+    state: {
+      title: 'Kilo Pass',
+      description: 'Monthly credits with bonus progress.',
+      action: 'open-web',
+      actionLabel: 'Subscribe',
+    },
+  };
+  return { content: card };
+});
+
+const CARD_CONTENT: CardContent = {
+  kind: 'card',
+  state: {
+    title: 'Kilo Pass',
+    description: 'Monthly credits with bonus progress.',
+    action: 'open-web',
+    actionLabel: 'Subscribe',
+  },
+};
+
+vi.mock('@/lib/trpc', () => ({
+  useTRPC: () => ({
+    kiloPass: {
+      getPurchasePresentation: {
+        queryOptions: () => ({ queryKey: ['kiloPass', 'presentation'] as const }),
+      },
+      getMobileStoreProducts: {
+        queryOptions: () => ({ queryKey: ['kiloPass', 'products'] as const }),
+      },
+      getState: {
+        queryOptions: () => ({ queryKey: ['kiloPass', 'state'] as const }),
+        pathFilter: () => ['kiloPass', 'state'] as const,
+      },
+      getCreditHistory: { pathFilter: () => ['kiloPass', 'history'] as const },
+    },
+    user: {
+      getContextBalance: { pathFilter: () => ['user', 'getContextBalance'] as const },
+      getCreditBlocks: { pathFilter: () => ['user', 'getCreditBlocks'] as const },
+    },
+  }),
+}));
+
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: () => ({ data: undefined, isError: false, isPending: true, refetch: vi.fn() }),
+  useQueryClient: () => ({ invalidateQueries }),
+}));
+
+vi.mock('@/lib/kilo-pass/subscription-card-state', () => ({
+  getKiloPassSubscriptionCardContentState: () => cardState.content,
+  getKiloPassSubscriptionCardAccessibility: (state: { title: string }) => ({
+    accessibilityLabel: state.title,
+    accessibilityHint: undefined,
+  }),
+}));
+
+vi.mock('@/lib/kilo-pass/dev-storekit-refund', () => ({
+  getDevStoreKitRefundAppleProductId: () => null,
+}));
+
+vi.mock('./kilo-pass-ios-manage', () => ({
+  openAppStoreManagement: vi.fn(async (params: { invalidateAfter: () => Promise<void> }) => {
+    await params.invalidateAfter();
+  }),
+}));
+
+vi.mock('expo-router', () => ({ useRouter: () => ({ push: vi.fn() }) }));
+vi.mock('expo-haptics', () => ({ selectionAsync: vi.fn() }));
+vi.mock('@/lib/hooks/use-theme-colors', () => ({
+  useThemeColors: () => ({ primary: '#fff' }),
+}));
+vi.mock('@/components/ui/text', () => ({ Text: 'Text' }));
+vi.mock('@/components/ui/skeleton', () => ({ Skeleton: 'Skeleton' }));
+vi.mock('@/components/kilo-pass/kilo-pass-icon', () => ({ KiloPassIcon: 'KiloPassIcon' }));
+vi.mock('react-native', () => ({
+  AppState: { addEventListener: vi.fn(() => ({ remove: vi.fn() })) },
+  Linking: { openURL: vi.fn() },
+  Platform: { OS: 'android' },
+  Pressable: 'Pressable',
+  View: 'View',
+  useWindowDimensions: () => windowDims,
+}));
+
+let renderer: TestRenderer.ReactTestRenderer | undefined = undefined;
+
+function renderCard(hideLoadingSkeleton = true) {
+  act(() => {
+    const element = createElement(KiloPassSubscriptionCard, { hideLoadingSkeleton });
+    if (renderer) {
+      renderer.update(element);
+    } else {
+      renderer = TestRenderer.create(element);
+    }
+  });
+  if (!renderer) {
+    throw new Error('Missing KiloPassSubscriptionCard renderer');
+  }
+  return renderer.root;
+}
+
+/** The classes of the body row: the one View that holds the icon tile. */
+function bodyRowClasses(root: TestRenderer.ReactTestInstance): string[] {
+  const tile = root.find(
+    node => Object.is(node.type, 'View') && String(node.props.className).includes('h-10 w-10')
+  );
+  const row = tile.parent;
+  return String(row?.props.className ?? '').split(' ');
+}
+
+/** The classes of the body row when the tile is a Skeleton instead of the icon. */
+function loadingRowClasses(root: TestRenderer.ReactTestInstance): string[] {
+  const tile = root.find(node => String(node.props.className).includes('h-10 w-10'));
+  return String(tile.parent?.props.className ?? '').split(' ');
+}
+
+afterEach(() => {
+  act(() => renderer?.unmount());
+  renderer = undefined;
+  windowDims.width = 390;
+  cardState.content = CARD_CONTENT;
+  invalidateQueries.mockClear();
+});
+
+describe('KiloPassSubscriptionCard mounted layout', () => {
+  it('keeps the icon tile, copy, and action label on one row at phone widths', () => {
+    const classes = bodyRowClasses(renderCard());
+    expect(classes).toContain('flex-row');
+    expect(classes).not.toContain('justify-between');
+  });
+
+  it('stacks the icon tile above the copy in a narrow window', () => {
+    // The 160 dp window of the e1 round left the fixed icon tile plus the
+    // fixed Subscribe label wider than the card, so the flexible text block
+    // collapsed to zero width and the wrapped copy stretched the card into an
+    // empty slab (Profile, 2026-09-21). A narrow window must stack instead,
+    // the same presentation ConfigureRow takes on these screens.
+    windowDims.width = 160;
+    const root = renderCard();
+    const classes = bodyRowClasses(root);
+    expect(classes).toContain('flex-row');
+    expect(classes).toContain('justify-between');
+    // The copy keeps the card's full width instead of collapsing.
+    expect(
+      String(
+        root.find(
+          node => Object.is(node.type, 'View') && String(node.props.className).includes('w-full')
+        ).props.className
+      )
+    ).toContain('w-full');
+  });
+
+  it('keeps the card pressable with its action label after the narrow swap', () => {
+    windowDims.width = 160;
+    const root = renderCard();
+    const card = root.findByProps({ accessibilityRole: 'button' });
+    expect(card.props.accessibilityLabel).toBe('Kilo Pass');
+    expect(
+      root.findAll(node => Object.is(node.type, 'Text') && node.props.children === 'Subscribe')
+    ).toHaveLength(1);
+  });
+});
+
+describe('KiloPassSubscriptionCard store management', () => {
+  it('invalidates every credit query the store-management path reads', async () => {
+    // The card's invalidateKiloPassState reads four path filters. A mock that
+    // omits one throws `Cannot read properties of undefined (reading
+    // 'pathFilter')` as soon as a test presses an open-store-management card
+    // (review, PR 6481, 2026-09-21).
+    cardState.content = {
+      kind: 'card',
+      state: {
+        title: 'Kilo Pass',
+        description: 'Manage your subscription.',
+        action: 'open-store-management',
+        actionLabel: 'Manage',
+      },
+    };
+    const card = renderCard().findByProps({ accessibilityRole: 'button' });
+    await act(async () => {
+      (card.props.onPress as () => void)();
+      await new Promise(resolve => {
+        setImmediate(resolve);
+      });
+    });
+    expect(invalidateQueries.mock.calls.map(([filter]) => filter)).toEqual([
+      ['kiloPass', 'state'],
+      ['user', 'getContextBalance'],
+      ['user', 'getCreditBlocks'],
+      ['kiloPass', 'history'],
+    ]);
+  });
+});
+
+describe('KiloPassSubscriptionCard loading layout', () => {
+  it('stacks the skeleton in a narrow window and clamps both bars to the card', () => {
+    cardState.content = { kind: 'loading' };
+    windowDims.width = 160;
+    const root = renderCard(false);
+    // The skeleton keeps the same stacked shape as the content, so the swap
+    // between them never reflows the card.
+    expect(loadingRowClasses(root)).toContain('justify-between');
+    const bars = root
+      .findAll(
+        node => Object.is(node.type, 'Skeleton') && /w-(28|48)/.test(String(node.props.className))
+      )
+      .map(node => String(node.props.className));
+    expect(bars).toHaveLength(2);
+    for (const className of bars) {
+      expect(className).toContain('max-w-full');
+    }
+  });
+
+  it('reserves the stacked card height while the balance skeleton owns the section', () => {
+    cardState.content = { kind: 'loading' };
+    windowDims.width = 160;
+    const root = renderCard(true);
+    expect(String(root.findByProps({ className: 'h-[114px]' }).props.className)).toBe('h-[114px]');
+  });
+
+  it('reserves the single-row card height at phone widths', () => {
+    cardState.content = { kind: 'loading' };
+    const root = renderCard(true);
+    expect(String(root.findByProps({ className: 'h-[66px]' }).props.className)).toBe('h-[66px]');
+  });
+});
diff --git a/apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx b/apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx
index 9fe809a22e..6229c0121d 100644
--- a/apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx
+++ b/apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx
@@ -1,7 +1,7 @@
 import { type Href, useRouter } from 'expo-router';
 import * as Haptics from 'expo-haptics';
-import { useEffect, useRef } from 'react';
-import { AppState, Linking, Platform, Pressable, View } from 'react-native';
+import { type ReactNode, useEffect, useRef } from 'react';
+import { AppState, Linking, Platform, Pressable, useWindowDimensions, View } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 
@@ -9,6 +9,7 @@ import { Text } from '@/components/ui/text';
 import { KiloPassIcon } from '@/components/kilo-pass/kilo-pass-icon';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
+import { isNarrowLayout } from '@/lib/narrow-layout';
 import { useTRPC } from '@/lib/trpc';
 import { getDevStoreKitRefundAppleProductId } from '@/lib/kilo-pass/dev-storekit-refund';
 import {
@@ -33,6 +34,13 @@ export function KiloPassSubscriptionCard({
   const trpc = useTRPC();
   const queryClient = useQueryClient();
   const { t } = useTranslation();
+  const { width } = useWindowDimensions();
+  // In a narrow window the fixed icon tile plus the fixed trailing label are
+  // wider than the card, so the flexible text block collapses to zero width
+  // and the wrapped copy stretches the card into an empty slab (Profile,
+  // 160 dp, e1 round, 2026-09-21). Stacking hands the text the card's full
+  // width, the same presentation ConfigureRow takes on these screens.
+  const narrow = isNarrowLayout(width);
   const platform = Platform.OS === 'ios' ? 'ios' : 'android';
   const storefront = Platform.OS === 'ios' ? 'app_store' : 'play';
   const presentationQuery = useQuery(
@@ -147,13 +155,38 @@ export function KiloPassSubscriptionCard({
 
   const isUnavailable = presentationQuery.data?.kind === 'unavailable';
 
+  // The card body's one row: icon tile + text block + an optional trailing
+  // label, stacked when a narrow window cannot fit the fixed siblings.
+  const iconTile = (
+    <View className="h-10 w-10 shrink-0 items-center justify-center rounded-md bg-secondary">
+      <KiloPassIcon size={19} color={colors.primary} />
+    </View>
+  );
+  const cardBody = (text: ReactNode, trailing?: ReactNode, tile: ReactNode = iconTile) =>
+    narrow ? (
+      <View className="gap-2">
+        <View className="flex-row items-center justify-between gap-3">
+          {tile}
+          {trailing ?? null}
+        </View>
+        <View className="w-full">{text}</View>
+      </View>
+    ) : (
+      <View className="flex-row items-center gap-3">
+        {tile}
+        <View className="flex-1">{text}</View>
+        {trailing ?? null}
+      </View>
+    );
+
   return (
     <View className="gap-2">
       {contentState.kind === 'loading' && hideLoadingSkeleton ? (
-        // p-3 (24) + the h-10 icon row (40) + the 1px borders (2): the
-        // exact height every card state below renders at, so the swap to
-        // content or to the shimmering skeleton never moves layout.
-        <View className="h-[66px]" />
+        // The height the loading card below renders at, so revealing it never
+        // moves layout: p-3 (24) + the h-10 icon row (40) + the 1px borders
+        // (2), plus the stacked copy row (gap-2 8 + the two skeleton bars
+        // 12 + 16 + 12) when narrow.
+        <View className={narrow ? 'h-[114px]' : 'h-[66px]'} />
       ) : null}
 
       {contentState.kind === 'loading' && !hideLoadingSkeleton ? (
@@ -162,13 +195,16 @@ export function KiloPassSubscriptionCard({
           accessibilityState={{ busy: true }}
           className="rounded-lg border border-border bg-card p-3"
         >
-          <View className="flex-row items-center gap-3">
+          {cardBody(
+            // Bars the height of the loaded title and description lines, clamped
+            // so a narrow window cannot overflow the card.
+            <View className="gap-3">
+              <Skeleton className="h-4 w-28 max-w-full rounded" />
+              <Skeleton className="h-3 w-48 max-w-full rounded" />
+            </View>,
+            undefined,
             <Skeleton className="h-10 w-10 rounded-md" />
-            <View className="flex-1 gap-1.5">
-              <Skeleton className="h-4 w-28 rounded" />
-              <Skeleton className="h-3 w-48 rounded" />
-            </View>
-          </View>
+          )}
         </View>
       ) : null}
 
@@ -184,34 +220,28 @@ export function KiloPassSubscriptionCard({
           className="rounded-lg border border-border bg-card p-3 active:opacity-80"
           onPress={handleRetryPress}
         >
-          <View className="flex-row items-center gap-3">
-            <View className="h-10 w-10 items-center justify-center rounded-md bg-secondary">
-              <KiloPassIcon size={19} color={colors.primary} />
-            </View>
-            <View className="flex-1">
+          {cardBody(
+            <>
               <Text className="font-semibold">{contentState.title}</Text>
               <Text className="text-xs text-muted-foreground">{contentState.description}</Text>
-            </View>
+            </>,
             <Text className="shrink-0 text-xs font-medium text-primary">
               {contentState.actionLabel}
             </Text>
-          </View>
+          )}
         </Pressable>
       ) : null}
 
       {contentState.kind === 'card' && contentState.state.action === 'none' ? (
         <View className="rounded-lg border border-border bg-card p-3">
-          <View className="flex-row items-center gap-3">
-            <View className="h-10 w-10 items-center justify-center rounded-md bg-secondary">
-              <KiloPassIcon size={19} color={colors.primary} />
-            </View>
-            <View className="flex-1">
+          {cardBody(
+            <>
               <Text className="font-semibold">{contentState.state.title}</Text>
               <Text className="text-xs text-muted-foreground">
                 {contentState.state.description}
               </Text>
-            </View>
-          </View>
+            </>
+          )}
         </View>
       ) : null}
 
@@ -230,22 +260,19 @@ export function KiloPassSubscriptionCard({
           onPress={handlePress}
           testID={isUnavailable ? 'kilo-pass-unavailable-card' : undefined}
         >
-          <View className="flex-row items-center gap-3">
-            <View className="h-10 w-10 items-center justify-center rounded-md bg-secondary">
-              <KiloPassIcon size={19} color={colors.primary} />
-            </View>
-            <View className="flex-1">
+          {cardBody(
+            <>
               <Text className="font-semibold">{contentState.state.title}</Text>
               <Text className="text-xs text-muted-foreground">
                 {contentState.state.description}
               </Text>
-            </View>
-            {contentState.state.actionLabel ? (
+            </>,
+            contentState.state.actionLabel ? (
               <Text className="shrink-0 text-xs font-medium text-primary">
                 {contentState.state.actionLabel}
               </Text>
-            ) : null}
-          </View>
+            ) : undefined
+          )}
         </Pressable>
       ) : null}
 
diff --git a/apps/mobile/src/components/profile-credits-card.mounted.test.tsx b/apps/mobile/src/components/profile-credits-card.mounted.test.tsx
index d1791bbd29..91fa8dacb2 100644
--- a/apps/mobile/src/components/profile-credits-card.mounted.test.tsx
+++ b/apps/mobile/src/components/profile-credits-card.mounted.test.tsx
@@ -29,6 +29,8 @@ const currentUser = vi.hoisted(() => ({
   userId: undefined as string | undefined,
   isError: false,
 }));
+/** Window the card lays out in; a narrow one must stack the credits header. */
+const windowDims = vi.hoisted(() => ({ width: 390, height: 844, fontScale: 1, scale: 2 }));
 
 vi.mock('@/lib/trpc', () => ({
   useTRPC: () => ({
@@ -103,7 +105,7 @@ vi.mock('react-native', () => ({
   Pressable: 'Pressable',
   ScrollView: 'ScrollView',
   View: 'View',
-  useWindowDimensions: () => ({ width: 400, height: 800 }),
+  useWindowDimensions: () => windowDims,
 }));
 
 vi.mock('expo-haptics', () => ({ selectionAsync: vi.fn() }));
@@ -212,8 +214,17 @@ async function choose(renderer: ReactTestRenderer, label: string) {
   });
 }
 
+/** The header container's classes: the only View the card gives `min-h-11`. */
+function headerClasses(renderer: ReactTestRenderer): string[] {
+  const header = renderer.root.find(
+    node => Object.is(node.type, 'View') && String(node.props.className).includes('min-h-11')
+  );
+  return String(header.props.className).split(' ');
+}
+
 beforeEach(() => {
   Platform.OS = 'ios';
+  windowDims.width = 390;
   savedMetadata.clear();
   saveCompletion = undefined;
   storage.read.mockReset().mockImplementation(async (key: string) => {
@@ -446,3 +457,30 @@ describe('CreditsCard balance state', () => {
     unmount();
   });
 });
+
+describe('CreditsCard credits header', () => {
+  const headerOrgs = [
+    { organizationId: 'org-a', organizationName, role: 'owner' },
+  ] as OrgListEntry[];
+
+  it('keeps the credits eyebrow and the account picker on one row at phone widths', async () => {
+    const { renderer, unmount } = await mountCard(createTestQueryClient(), headerOrgs);
+
+    // The 160 dp window of the e1 round squeezed the eyebrow until Android
+    // broke it mid-word ("CREDIT S"); a phone-width window must not.
+    expect(headerClasses(renderer)).toContain('flex-row');
+    unmount();
+  });
+
+  it('stacks the credits eyebrow above the account picker in a narrow window', async () => {
+    windowDims.width = 160;
+    const { renderer, texts, unmount } = await mountCard(createTestQueryClient(), headerOrgs);
+
+    const classes = headerClasses(renderer);
+    expect(classes).toContain('flex-col');
+    expect(classes).not.toContain('flex-row');
+    // The eyebrow keeps its full copy instead of breaking mid-word.
+    expect(texts()).toContain('Credits');
+    unmount();
+  });
+});
diff --git a/apps/mobile/src/components/profile-credits-card.tsx b/apps/mobile/src/components/profile-credits-card.tsx
index daf9a02352..cddba252d6 100644
--- a/apps/mobile/src/components/profile-credits-card.tsx
+++ b/apps/mobile/src/components/profile-credits-card.tsx
@@ -2,7 +2,7 @@ import { fromMicrodollars } from '@kilocode/app-shared/utils';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import * as Haptics from 'expo-haptics';
 import { ChevronDown, Eye, EyeOff } from '@/components/ui/icons';
-import { Platform, Pressable, View } from 'react-native';
+import { Platform, Pressable, useWindowDimensions, View } from 'react-native';
 import { ActivityIndicator } from '@/components/ui/activity-indicator';
 import { useTranslation } from 'react-i18next';
 import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
@@ -19,9 +19,10 @@ import { useCurrentUserId } from '@/lib/hooks/use-current-user-id';
 import { useHideBalancePreference } from '@/lib/hooks/use-hide-balance-preference';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
 import { isMoneyRole, type OrgListEntry } from '@/lib/hooks/use-organization-queries';
+import { isNarrowLayout } from '@/lib/narrow-layout';
 import { useOrganization } from '@/lib/organization-context';
 import { useTRPC } from '@/lib/trpc';
-import { parseTimestamp } from '@/lib/utils';
+import { cn, parseTimestamp } from '@/lib/utils';
 
 const HIDDEN_BALANCE = '*****';
 
@@ -33,6 +34,12 @@ type CreditsCardProps = {
 export function CreditsCard({ enabled, orgs }: Readonly<CreditsCardProps>) {
   const trpc = useTRPC();
   const colors = useThemeColors();
+  const { width } = useWindowDimensions();
+  // Below NARROW_LAYOUT_WIDTH the account picker's 65% share leaves the
+  // "CREDITS" eyebrow too little room for one word and Android breaks it
+  // mid-word ("CREDIT S", 160 dp, e1, 2026-09-21). Stacking gives each line the
+  // row's full width.
+  const narrow = isNarrowLayout(width);
   const { t, i18n } = useTranslation();
   const { openPicker, picker } = useContextPicker(orgs);
   const { organizationId, error, isSaving, retry } = useOrganization();
@@ -127,13 +134,21 @@ export function CreditsCard({ enabled, orgs }: Readonly<CreditsCardProps>) {
 
   return (
     <View className="gap-3">
-      <View className="min-h-11 flex-row items-center justify-between gap-3">
+      <View
+        className={cn(
+          'min-h-11 gap-3',
+          narrow ? 'flex-col items-stretch' : 'flex-row items-center justify-between'
+        )}
+      >
         <Text variant="small" className="shrink uppercase tracking-wide text-muted-foreground">
           {t('profile.credits')}
         </Text>
         {canPickContext && (
           <Pressable
-            className="min-h-11 min-w-0 max-w-[65%] shrink flex-row items-center justify-end gap-1 active:opacity-70"
+            className={cn(
+              'min-h-11 min-w-0 flex-row items-center gap-1 active:opacity-70',
+              narrow ? 'max-w-full justify-start' : 'max-w-[65%] shrink justify-end'
+            )}
             onPress={openPicker}
             accessibilityRole="button"
             accessibilityLabel={selectedLabel}
diff --git a/apps/mobile/src/components/ui/configure-row.mounted.test.tsx b/apps/mobile/src/components/ui/configure-row.mounted.test.tsx
index a2fee8d5c6..748b15177a 100644
--- a/apps/mobile/src/components/ui/configure-row.mounted.test.tsx
+++ b/apps/mobile/src/components/ui/configure-row.mounted.test.tsx
@@ -1,20 +1,24 @@
 /* eslint-disable typescript-eslint/no-deprecated -- DOM-free mounted React Native layout regression tests. */
 import { createElement } from 'react';
-import { act, TestRenderer } from '@/test/renderer';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { Globe } from '@/components/ui/icons';
+import { act, TestRenderer } from '@/test/renderer';
 
 import { ConfigureRow } from './configure-row';
 
+const windowDims = vi.hoisted(() => ({ width: 390, height: 844, fontScale: 1, scale: 2 }));
+
 vi.mock('react-native', () => ({
   Pressable: 'Pressable',
   View: 'View',
-  useWindowDimensions: () => ({ fontScale: 1, width: 390, height: 844 }),
+  useWindowDimensions: () => windowDims,
 }));
 vi.mock('@/components/ui/icons', () => ({ Globe: 'Globe' }));
 vi.mock('@/components/ui/text', () => ({ Text: 'Text' }));
-vi.mock('@/components/ui/directional-icons', () => ({ DirectionalChevronRight: 'ChevronRight' }));
+vi.mock('@/components/ui/directional-icons', () => ({
+  DirectionalChevronRight: 'ChevronRight',
+}));
 vi.mock('@/lib/hooks/use-theme-colors', () => ({
   useThemeColors: () => ({
     secondaryForeground: '#F2F0EB',
@@ -44,9 +48,15 @@ const PREFERENCES_HUB_ROW_TITLES = [
 
 let renderer: TestRenderer.ReactTestRenderer | undefined = undefined;
 
-function renderRow(props: { title: string; tone?: 'good' | 'warn' | 'danger' }) {
+function renderRow(props: { title?: string; tone?: 'good' | 'warn' | 'danger' } = {}) {
   act(() => {
-    const element = createElement(ConfigureRow, { ...props, icon: Globe });
+    const element = createElement(ConfigureRow, {
+      icon: Globe,
+      title: props.title ?? 'General',
+      subtitle: 'Transcribe',
+      onPress: () => undefined,
+      ...(props.tone === undefined ? {} : { tone: props.tone }),
+    });
     if (renderer) {
       renderer.update(element);
     } else {
@@ -56,7 +66,22 @@ function renderRow(props: { title: string; tone?: 'good' | 'warn' | 'danger' })
   if (!renderer) {
     throw new Error('Missing ConfigureRow renderer');
   }
-  const root = renderer.root;
+  return renderer.root;
+}
+
+/** The classes of the row body: the one View that carries the row padding. */
+function rowClasses(root: TestRenderer.ReactTestInstance): string[] {
+  const body = root.find(
+    node => Object.is(node.type, 'View') && String(node.props.className).includes('py-3')
+  );
+  return String(body.props.className).split(' ');
+}
+
+/** The shared icon tile and its stroke for the mounted row. */
+function tileOf(root: TestRenderer.ReactTestInstance): {
+  tileClassName: string;
+  iconColor: string;
+} {
   const tile = root.find(
     node =>
       typeof node.props.className === 'string' && node.props.className.includes('h-[30px] w-[30px]')
@@ -74,11 +99,37 @@ beforeEach(() => {
 afterEach(() => {
   act(() => renderer?.unmount());
   renderer = undefined;
+  windowDims.width = 390;
+  windowDims.fontScale = 1;
+});
+
+describe('ConfigureRow mounted layout', () => {
+  // A 160 dp window leaves the text block between the icon tile and the
+  // chevron too little room for one word, and Android broke it mid-word
+  // ("Gene ral" / "Trans cribe", e1-settings, 2026-09-21). Stacking hands the
+  // title and subtitle the row's full width.
+  it('stacks the icon above the title in a narrow window', () => {
+    windowDims.width = 160;
+    const classes = rowClasses(renderRow());
+    expect(classes).toEqual(expect.arrayContaining(['gap-2', 'py-3']));
+    expect(classes).not.toContain('flex-row');
+  });
+
+  it('keeps the side-by-side row at phone widths', () => {
+    const classes = rowClasses(renderRow());
+    expect(classes).toEqual(expect.arrayContaining(['flex-row', 'items-center', 'gap-3']));
+    expect(classes).not.toContain('gap-2');
+  });
+
+  it('still stacks at the large-font-scale threshold', () => {
+    windowDims.fontScale = 1.8;
+    expect(rowClasses(renderRow())).not.toContain('flex-row');
+  });
 });
 
 describe('ConfigureRow icon tile', () => {
   it.each(ACCOUNT_ROW_TITLES)('gives the %s account row the shared neutral tile', title => {
-    const row = renderRow({ title });
+    const row = tileOf(renderRow({ title }));
 
     expect(row.tileClassName).toContain('bg-hair-soft');
     expect(row.tileClassName).toContain('border-border');
@@ -88,15 +139,15 @@ describe('ConfigureRow icon tile', () => {
 
   it('gives the account and Preferences hub rows one identical tile', () => {
     const tiles = [...ACCOUNT_ROW_TITLES, ...PREFERENCES_HUB_ROW_TITLES].map(
-      title => renderRow({ title }).tileClassName
+      title => tileOf(renderRow({ title })).tileClassName
     );
 
     expect(new Set(tiles).size).toBe(1);
   });
 
   it('still lets a semantic tone override the neutral tile', () => {
-    const neutral = renderRow({ title: 'Language' });
-    const danger = renderRow({ title: 'Language', tone: 'danger' });
+    const neutral = tileOf(renderRow({ title: 'Language' }));
+    const danger = tileOf(renderRow({ title: 'Language', tone: 'danger' }));
 
     expect(danger.tileClassName).toContain('bg-danger-tile-bg');
     expect(danger.iconColor).toBe('#F28B7A');
diff --git a/apps/mobile/src/components/ui/configure-row.tsx b/apps/mobile/src/components/ui/configure-row.tsx
index d64f6d7c8e..c09289d435 100644
--- a/apps/mobile/src/components/ui/configure-row.tsx
+++ b/apps/mobile/src/components/ui/configure-row.tsx
@@ -7,12 +7,15 @@ import { Pressable, useWindowDimensions, View } from 'react-native';
 import { Text } from '@/components/ui/text';
 import { type RowHue, rowTint, type Tint, toneColor, type ToneKey } from '@/lib/agent-color';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
+import { isNarrowLayout } from '@/lib/narrow-layout';
 import { cn } from '@/lib/utils';
 
 /**
  * At/above this Dynamic Type scale, ConfigureRow stacks the icon above the
  * title block so long labels never clip against the chevron in a side row.
- * Matches the tab-label wrap threshold used elsewhere in the shell.
+ * Matches the tab-label wrap threshold used elsewhere in the shell. A window
+ * narrower than `NARROW_LAYOUT_WIDTH` squeezes the same text block and takes
+ * the same presentation.
  */
 const CONFIGURE_ROW_STACK_FONT_SCALE = 1.8;
 
@@ -82,11 +85,17 @@ export function ConfigureRow({
   className,
 }: Readonly<ConfigureRowProps>) {
   const colors = useThemeColors();
-  const { fontScale } = useWindowDimensions();
-  const stack = fontScale >= CONFIGURE_ROW_STACK_FONT_SCALE;
+  const { fontScale, width } = useWindowDimensions();
+  // A narrow window squeezes the flexible text block between the fixed icon
+  // tile and the chevron exactly as a large font scale does, until a whole word
+  // no longer fits and Android breaks it mid-word ("Gene ral", 160 dp, e1,
+  // 2026-09-21). Both cases get the stacked presentation, which hands the
+  // title the row's full width.
+  const stack = fontScale >= CONFIGURE_ROW_STACK_FONT_SCALE || isNarrowLayout(width);
   // A semantic tone outranks the curated destination hue, and a row carrying
   // neither keeps the neutral tile that the settings surfaces outside the
   // Profile screen still render (preferences-screen, account-settings-screen).
+  // A title never hashes into an agent hue here.
   let tint: Tint = NEUTRAL_TINT;
   if (tone) {
     tint = toneColor(tone);
diff --git a/apps/mobile/src/components/ui/segmented-control.tsx b/apps/mobile/src/components/ui/segmented-control.tsx
index 843052c6d5..d07f0d408c 100644
--- a/apps/mobile/src/components/ui/segmented-control.tsx
+++ b/apps/mobile/src/components/ui/segmented-control.tsx
@@ -56,8 +56,9 @@ export function SegmentedControl<T extends string>({
                 longer label ("Commit and push") on one line at every width and
                 font scale — the platform shrinks the font to fit rather than
                 truncating, so the label stays readable — and a label that still
-                overflows ellipsizes instead of growing a second line. The
-                radio's accessibilityLabel still carries the full text. */}
+                overflows ellipsizes. Longer locales shrink to fit instead of
+                growing a second line; the radio's accessibilityLabel still
+                carries the full text. */}
             <Text
               numberOfLines={1}
               adjustsFontSizeToFit
@@ -65,9 +66,6 @@ export function SegmentedControl<T extends string>({
                 'text-center text-sm',
                 selected ? 'font-medium text-foreground' : 'text-muted-foreground'
               )}
-              // One line per option: a wrapped label makes the two choices
-              // uneven. Longer locales shrink to fit instead of growing a second
-              // line; the radio's accessibilityLabel still carries the full text.
             >
               {option.label}
             </Text>
diff --git a/apps/mobile/src/components/ui/text.rtl-tracking.mounted.test.tsx b/apps/mobile/src/components/ui/text.rtl-tracking.mounted.test.tsx
index e787234667..b48bce3b9f 100644
--- a/apps/mobile/src/components/ui/text.rtl-tracking.mounted.test.tsx
+++ b/apps/mobile/src/components/ui/text.rtl-tracking.mounted.test.tsx
@@ -153,6 +153,10 @@ describe('Text tracked labels in RTL', () => {
     expect(className).not.toContain('tracking-[1.5px]');
     expect(className).not.toContain('tracking');
     expect(hostText(root).props.className as string).not.toContain('tracking-');
+    // The mono family goes with them: JetBrains Mono ships no Arabic glyphs, so
+    // the RTL eyebrow drops `font-mono-medium` as well (`withoutMonoFamily`),
+    // matching the LTR-only display treatment it just lost.
+    expect(classes.some(name => name.startsWith('font-mono'))).toBe(false);
     expect(hostStyle(root)).toContainEqual(RTL_NO_LETTER_SPACING);
   });
 
diff --git a/apps/mobile/src/lib/narrow-layout.test.ts b/apps/mobile/src/lib/narrow-layout.test.ts
new file mode 100644
index 0000000000..2be28904d6
--- /dev/null
+++ b/apps/mobile/src/lib/narrow-layout.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+
+import { isNarrowLayout, NARROW_LAYOUT_WIDTH } from '@/lib/narrow-layout';
+
+describe('isNarrowLayout', () => {
+  it('is narrow below the threshold', () => {
+    expect(isNarrowLayout(160)).toBe(true);
+    expect(isNarrowLayout(200)).toBe(true);
+    expect(isNarrowLayout(NARROW_LAYOUT_WIDTH - 1)).toBe(true);
+  });
+
+  it('keeps the side-by-side layout at the threshold and every real phone width', () => {
+    expect(isNarrowLayout(NARROW_LAYOUT_WIDTH)).toBe(false);
+    expect(isNarrowLayout(320)).toBe(false);
+    expect(isNarrowLayout(411)).toBe(false);
+  });
+
+  it('treats an unknown width as the standard layout', () => {
+    expect(isNarrowLayout(undefined)).toBe(false);
+  });
+});
diff --git a/apps/mobile/src/lib/narrow-layout.ts b/apps/mobile/src/lib/narrow-layout.ts
new file mode 100644
index 0000000000..75f5b508e4
--- /dev/null
+++ b/apps/mobile/src/lib/narrow-layout.ts
@@ -0,0 +1,26 @@
+/**
+ * Window width (dp) below which the shell drops a fixed side-by-side row for a
+ * stacked one.
+ *
+ * The design targets the narrowest common phone (320 dp), where a row's fixed
+ * icon tile and trailing chevron still leave the flexible text column room for
+ * a whole word. A window can be narrower than that: a split-screen pane, a
+ * foldable's cover display, a large Android display-size override, or a test
+ * device at 480x1000 @ 480 dpi (160 dp). There, the fixed siblings squeeze the
+ * text column below one word's width and Android breaks that word mid-word
+ * ("Gene ral", "CREDIT S", "PROFIL E") — the defect the launcher e1 round saw
+ * on Profile and Preferences (2026-09-21).
+ *
+ * 240 dp leaves a full text column at every real phone width and switches to
+ * the stacked presentation only where the row has genuinely run out of room.
+ */
+export const NARROW_LAYOUT_WIDTH = 240;
+
+/**
+ * Whether a window `width` dp wide is too narrow for a fixed side-by-side row.
+ * An unknown width (a partial `useWindowDimensions` mock) keeps the standard
+ * layout: the stacked presentation is the exception, never the default.
+ */
+export function isNarrowLayout(width: number | undefined): boolean {
+  return width !== undefined && width < NARROW_LAYOUT_WIDTH;
+}
diff --git a/apps/mobile/src/lib/tab-bar-layout.test.ts b/apps/mobile/src/lib/tab-bar-layout.test.ts
index 9a58ea1825..d31e832368 100644
--- a/apps/mobile/src/lib/tab-bar-layout.test.ts
+++ b/apps/mobile/src/lib/tab-bar-layout.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines -- the bar-height, label-width and label-fit suites all read one module and the same source-parity text; splitting them would duplicate that harness */
 // eslint-disable-next-line import/no-nodejs-modules -- vitest-only parity check, runs in node, never bundled into the app
 import { readFileSync } from 'node:fs';
 // eslint-disable-next-line import/no-nodejs-modules -- vitest-only parity check, runs in node, never bundled into the app
@@ -15,10 +16,12 @@ import {
   shouldHideTabBar,
   shouldShowTabLabel,
   TAB_ICON_FORWARD_FONT_SCALE,
+  TAB_LABEL_MINIMUM_FONT_SCALE,
   TAB_LABEL_WRAP_FONT_SCALE,
   tabAccessibilityLabel,
   tabBarPosition,
   tabLabelFits,
+  tabLabelLineCount,
   tabLabelNumberOfLines,
   tabLabelWidth,
   visibleTabCount,
@@ -51,6 +54,29 @@ describe('getTabBarOverlayHeight', () => {
   });
 });
 
+describe('tabLabelLineCount', () => {
+  it('reserves one line below the wrap threshold', () => {
+    expect(tabLabelLineCount(1)).toBe(1);
+    expect(tabLabelLineCount(TAB_LABEL_WRAP_FONT_SCALE)).toBe(1);
+  });
+
+  it('reserves the second line above the wrap threshold', () => {
+    expect(tabLabelLineCount(TAB_LABEL_WRAP_FONT_SCALE + 0.01)).toBe(2);
+    expect(tabLabelLineCount(3)).toBe(2);
+  });
+
+  it('agrees with the height the bar reserves', () => {
+    // The bar reserves one label line below the wrap threshold and two above
+    // it; the label is never allowed to render more lines than that.
+    expect(getTabBarOverlayHeight(0, 'android', 1)).toBeCloseTo(
+      34 + 16 * 1 * tabLabelLineCount(1) + 4
+    );
+    expect(getTabBarOverlayHeight(0, 'android', 1.9)).toBeCloseTo(
+      34 + 16 * 1.9 * tabLabelLineCount(1.9) + 4
+    );
+  });
+});
+
 describe('getEffectiveTabBarHeight', () => {
   it('uses the label-inclusive overlay height below the icon-forward threshold', () => {
     expect(getEffectiveTabBarHeight({ bottomInset: 34, platform: 'ios', fontScale: 1 })).toBe(
@@ -254,6 +280,67 @@ describe('shouldShowTabLabel', () => {
   });
 });
 
+describe('tab label shrink floor', () => {
+  // `TabLabel` asks the platform to shrink an overflowing label and caps the
+  // shrink at `TAB_LABEL_MINIMUM_FONT_SCALE` on iOS; RN implements
+  // `minimumFontScale` on iOS only, so Android's `adjustsFontSizeToFit` floors
+  // at RN's own platform minimum instead. The cap is therefore a residual
+  // guard, and the legibility guarantee has to come from the width rule: the
+  // bar drops the whole label row as soon as one full-size label would not fit
+  // its tab, so every label that renders already fits at scale 1 and no label
+  // can reach either platform's floor. This suite pins that contract — the
+  // platform cap may not be the thing that keeps the labels legible.
+  const LABEL_SETS: readonly (readonly string[])[] = [
+    ['Home', 'Agents', 'Profile'],
+    ['Home', 'KiloClaw', 'Agents', 'Chat', 'Profile'],
+    ['Home', 'Agents', 'Bogga shakhsiga'],
+  ];
+  // The label box is the tab item minus its 10dp horizontal padding.
+  const TAB_ITEM_PADDING = 10;
+  const TAB_WIDTHS = [40, 50, 72, 80, 90, 106.67, 120, 200];
+
+  it('renders every label at the full size that already fits its tab', () => {
+    const renderedRows: { labels: readonly string[]; tabWidth: number }[] = [];
+    for (const labels of LABEL_SETS) {
+      for (const tabWidth of TAB_WIDTHS) {
+        if (shouldShowTabLabel(1, tabWidth, labels)) {
+          renderedRows.push({ labels, tabWidth });
+        }
+      }
+    }
+    // Guard against a vacuous sweep that never renders a label row.
+    expect(renderedRows.length).toBeGreaterThan(0);
+    for (const { labels, tabWidth } of renderedRows) {
+      const box = tabWidth - TAB_ITEM_PADDING;
+      for (const label of labels) {
+        expect(tabLabelFits(label, tabWidth)).toBe(true);
+        // A full-size render fits, so the shrink the platform is asked for
+        // stays a sub-1.0 margin, above `TAB_LABEL_MINIMUM_FONT_SCALE`.
+        expect(box / tabLabelWidth(label)).toBeGreaterThanOrEqual(TAB_LABEL_MINIMUM_FONT_SCALE);
+      }
+    }
+  });
+
+  it('drops the label row before a label could need a shrink below the floor', () => {
+    const floorBoundLabels = ['Profile', 'Kilo Claw', 'Bogga shakhsiga', '設定'];
+    let checkedWidths = 0;
+    for (const label of floorBoundLabels) {
+      for (const tabWidth of TAB_WIDTHS) {
+        const box = tabWidth - TAB_ITEM_PADDING;
+        // The label would only fit by shrinking below the floor, so the bar
+        // must drop the row rather than lean on the iOS-only cap to keep it
+        // legible.
+        if (tabLabelWidth(label) > box / TAB_LABEL_MINIMUM_FONT_SCALE) {
+          checkedWidths += 1;
+          expect(shouldShowTabLabel(1, tabWidth, [label])).toBe(false);
+        }
+      }
+    }
+    // The sweep must actually cross the floor boundary.
+    expect(checkedWidths).toBeGreaterThan(0);
+  });
+});
+
 describe('tabLabelNumberOfLines', () => {
   it('keeps a word that fits its tab on one line', () => {
     expect(tabLabelNumberOfLines('Home')).toBe(1);
diff --git a/apps/mobile/src/lib/tab-bar-layout.ts b/apps/mobile/src/lib/tab-bar-layout.ts
index ecbc466b89..772b7d8aa2 100644
--- a/apps/mobile/src/lib/tab-bar-layout.ts
+++ b/apps/mobile/src/lib/tab-bar-layout.ts
@@ -5,14 +5,24 @@ const TAB_BAR_BASE_HEIGHT = 50;
 const ANDROID_TAB_BAR_EXTRA_PADDING = 4;
 export const TAB_LABEL_WRAP_FONT_SCALE = 1.8;
 /**
- * Above this font scale the tab bar drops visible labels and switches to an
- * icon-forward presentation. The label height (which scales with fontScale) is
+ * At or above this font scale the tab bar drops visible labels and switches to
+ * an icon-forward presentation. The label height (which scales with fontScale) is
  * removed from the overlay height calculation, so the bar stays at the base
  * 50pt instead of ballooning. Labels remain available to assistive tech via
  * `tabBarAccessibilityLabel`. Picked above the label-wrap threshold so
  * moderate-to-large text still keeps a visible word label.
  */
 export const TAB_ICON_FORWARD_FONT_SCALE = 2;
+/**
+ * Floor for a tab label's shrink-to-fit, honoured on iOS only: RN implements
+ * `Text`'s `minimumFontScale` on iOS, while Android's `adjustsFontSizeToFit`
+ * floors at RN's own platform minimum. The cap is a residual guard, not the
+ * legibility rule — `shouldShowTabLabel` drops the labels as soon as one
+ * full-size label would not fit its tab, so a label that renders never needs to
+ * shrink that far on either platform, and the one-line/tail-truncate behaviour
+ * is the same on both.
+ */
+export const TAB_LABEL_MINIMUM_FONT_SCALE = 0.75;
 const TAB_ICON_BASE_SIZE = 22;
 const TAB_ICON_MAX_SIZE = 26;
 
@@ -33,12 +43,24 @@ const TAB_ITEM_HORIZONTAL_PADDING = 10;
 
 type TabBarPlatform = 'android' | 'ios' | 'macos' | 'windows' | 'web';
 
+/**
+ * Number of label lines the bar reserves and the label may use. Below the wrap
+ * threshold the bar is sized for one line, so the label must stay on one line
+ * and shrink to fit it: a word wider than its tab would otherwise wrap into a
+ * second line the bar has no room for, and be clipped at the bar's edge
+ * ("PROFIL E", 480x1000 @ 480 = 160 dp, e1, 2026-09-21). Above the threshold the
+ * bar grows the second line for the two-line `tabs.kiloclawWrapped` label.
+ */
+export function tabLabelLineCount(fontScale = 1): 1 | 2 {
+  return fontScale > TAB_LABEL_WRAP_FONT_SCALE ? 2 : 1;
+}
+
 export function getTabBarOverlayHeight(
   bottomInset: number,
   platform: TabBarPlatform,
   fontScale = 1
 ): number {
-  const labelLines = fontScale > TAB_LABEL_WRAP_FONT_SCALE ? 2 : 1;
+  const labelLines = tabLabelLineCount(fontScale);
   const tabContentHeight = 34 + 16 * fontScale * labelLines;
   return (
     Math.max(TAB_BAR_BASE_HEIGHT, tabContentHeight) +
diff --git a/patches/expo-dev-launcher@57.0.19.patch b/patches/expo-dev-launcher@57.0.19.patch
new file mode 100644
index 0000000000..efab850fd6
--- /dev/null
+++ b/patches/expo-dev-launcher@57.0.19.patch
@@ -0,0 +1,182 @@
+diff --git a/android/src/debug/java/expo/modules/devlauncher/compose/ui/AppHeader.kt b/android/src/debug/java/expo/modules/devlauncher/compose/ui/AppHeader.kt
+index e1b597d..bafec6c 100644
+--- a/android/src/debug/java/expo/modules/devlauncher/compose/ui/AppHeader.kt
++++ b/android/src/debug/java/expo/modules/devlauncher/compose/ui/AppHeader.kt
+@@ -7,10 +7,19 @@ import androidx.compose.foundation.layout.Column
+ import androidx.compose.foundation.layout.Row
+ import androidx.compose.foundation.layout.padding
+ import androidx.compose.foundation.layout.size
++import androidx.compose.foundation.text.BasicText
+ import androidx.compose.runtime.Composable
++import androidx.compose.runtime.getValue
++import androidx.compose.runtime.mutableStateOf
++import androidx.compose.runtime.remember
++import androidx.compose.runtime.setValue
+ import androidx.compose.ui.Alignment
+ import androidx.compose.ui.Modifier
++import androidx.compose.ui.layout.onSizeChanged
++import androidx.compose.ui.text.AnnotatedString
+ import androidx.compose.ui.text.font.FontWeight
++import androidx.compose.ui.text.rememberTextMeasurer
++import androidx.compose.ui.text.style.TextOverflow
+ import androidx.compose.ui.tooling.preview.Preview
+ import androidx.compose.ui.unit.dp
+ import androidx.lifecycle.compose.collectAsStateWithLifecycle
+@@ -67,6 +76,7 @@ fun AppHeader(
+   currentAccount: MeQuery.Account? = null,
+   onProfileClick: () -> Unit = {}
+ ) {
++  var headerWidthPx by remember { mutableStateOf(0) }
+   Row(
+     horizontalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`),
+     verticalAlignment = Alignment.CenterVertically,
+@@ -76,13 +86,42 @@ fun AppHeader(
+ 
+     Column(
+       verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`),
+-      modifier = Modifier.weight(1f)
++      // The copy column's laid-out width. Not BoxWithConstraints: an intrinsic
++      // measurement of a SubcomposeLayout throws "Asking for intrinsic
++      // measurements of SubcomposeLayout layouts is not supported" and takes
++      // the launcher down (e1 round, 2026-09-21).
++      modifier = Modifier
++        .weight(1f)
++        .onSizeChanged { headerWidthPx = it.width }
+     ) {
+-      NewText(
+-        appName,
+-        style = NewAppTheme.font.lg.merge(
+-          fontWeight = FontWeight.SemiBold
++      // One line, shrunk to fit: in a narrow window the header column is too
++      // small for the app name at its normal size and Compose broke it one
++      // character per line ("K/i/l/o"). Ellipsize only below the 0.75 floor.
++      val headerStyle = NewAppTheme.font.md.merge(
++        color = NewAppTheme.colors.text.default,
++        fontFamily = NewAppTheme.font.inter,
++        fontWeight = FontWeight.Normal
++      ).merge(
++        NewAppTheme.font.lg.merge(fontWeight = FontWeight.SemiBold)
++      )
++      val textMeasurer = rememberTextMeasurer()
++      val measuredWidthPx = remember(appName, headerStyle) {
++        textMeasurer.measure(AnnotatedString(appName), headerStyle, maxLines = 1).size.width
++      }
++      val factor = if (headerWidthPx > 0 && measuredWidthPx > headerWidthPx) {
++        maxOf(
++          0.75f,
++          headerWidthPx.toFloat() / measuredWidthPx.toFloat()
+         )
++      } else {
++        1f
++      }
++      BasicText(
++        appName,
++        maxLines = 1,
++        softWrap = false,
++        overflow = TextOverflow.Ellipsis,
++        style = headerStyle.copy(fontSize = headerStyle.fontSize * factor)
+       )
+ 
+       NewText(
+diff --git a/android/src/debug/java/expo/modules/devlauncher/compose/ui/BottomTabButton.kt b/android/src/debug/java/expo/modules/devlauncher/compose/ui/BottomTabButton.kt
+index 232bdcf..f5b77e8 100644
+--- a/android/src/debug/java/expo/modules/devlauncher/compose/ui/BottomTabButton.kt
++++ b/android/src/debug/java/expo/modules/devlauncher/compose/ui/BottomTabButton.kt
+@@ -6,16 +6,28 @@ import androidx.compose.foundation.layout.Arrangement
+ import androidx.compose.foundation.layout.Column
+ import androidx.compose.foundation.layout.padding
+ import androidx.compose.foundation.shape.RoundedCornerShape
++import androidx.compose.foundation.text.BasicText
+ import androidx.compose.runtime.Composable
++import androidx.compose.runtime.getValue
++import androidx.compose.runtime.mutableStateOf
++import androidx.compose.runtime.remember
++import androidx.compose.runtime.setValue
+ import androidx.compose.ui.Alignment
+ import androidx.compose.ui.Modifier
+ import androidx.compose.ui.draw.clip
+ import androidx.compose.ui.graphics.Color
++import androidx.compose.ui.layout.onSizeChanged
++import androidx.compose.ui.text.AnnotatedString
+ import androidx.compose.ui.text.font.FontWeight
++import androidx.compose.ui.text.rememberTextMeasurer
++import androidx.compose.ui.text.style.TextOverflow
+ import androidx.compose.ui.unit.Dp
+ import androidx.compose.ui.unit.dp
+ import expo.modules.devmenu.compose.newtheme.NewAppTheme
+-import expo.modules.devmenu.compose.primitives.NewText
++
++/** Floor for a label's shrink-to-fit: 8 sp (the sm style is 12 sp), the scale
++ * where the widest stock label, 'Updates', still fits the 32 dp tab. */
++private const val LABEL_MIN_FONT_SCALE = 0.667f
+ 
+ @Composable
+ fun BottomTabButton(
+@@ -25,10 +37,17 @@ fun BottomTabButton(
+   modifier: Modifier = Modifier,
+   onClick: () -> Unit
+ ) {
++  var tabWidthPx by remember { mutableStateOf(0) }
+   Column(
+     horizontalAlignment = Alignment.CenterHorizontally,
+     verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`),
+     modifier = modifier
++      // The tab's laid-out width. Not BoxWithConstraints: BottomTabBar measures
++      // its row with IntrinsicSize.Max, and an intrinsic measurement of a
++      // SubcomposeLayout throws "Asking for intrinsic measurements of
++      // SubcomposeLayout layouts is not supported", taking the launcher down
++      // (e1 round, 2026-09-21).
++      .onSizeChanged { tabWidthPx = it.width }
+       .clip(
+         RoundedCornerShape(NewAppTheme.borderRadius.md)
+       )
+@@ -53,16 +72,40 @@ fun BottomTabButton(
+       }
+     )
+ 
+-    NewText(
++    // Keep the tab label to one line: in a narrow window the tab is too small
++    // for the label at its normal size, and Compose then broke it mid-word
++    // into a second line the pill clipped ("Upda tes", "Settin gs"). Shrink
++    // the label to fit instead, and ellipsize only below the 8 sp floor.
++    val labelColor = if (isSelected) {
++      NewAppTheme.colors.icon.info
++    } else {
++      NewAppTheme.colors.icon.quaternary
++    }
++    val labelStyle = NewAppTheme.font.md.merge(
++      color = labelColor,
++      fontFamily = NewAppTheme.font.inter,
++      fontWeight = FontWeight.Normal
++    ).merge(
++      NewAppTheme.font.sm.merge(fontWeight = FontWeight.Medium)
++    )
++    val textMeasurer = rememberTextMeasurer()
++    val measuredWidthPx = remember(label, labelStyle) {
++      textMeasurer.measure(AnnotatedString(label), labelStyle, maxLines = 1).size.width
++    }
++    val factor = if (tabWidthPx > 0 && measuredWidthPx > tabWidthPx) {
++      maxOf(
++        LABEL_MIN_FONT_SCALE,
++        tabWidthPx.toFloat() / measuredWidthPx.toFloat()
++      )
++    } else {
++      1f
++    }
++    BasicText(
+       label,
+-      style = NewAppTheme.font.sm.merge(
+-        fontWeight = FontWeight.Medium
+-      ),
+-      color = if (isSelected) {
+-        NewAppTheme.colors.icon.info
+-      } else {
+-        NewAppTheme.colors.icon.quaternary
+-      }
++      maxLines = 1,
++      softWrap = false,
++      overflow = TextOverflow.Ellipsis,
++      style = labelStyle.copy(fontSize = labelStyle.fontSize * factor)
+     )
+   }
+ }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a1adc06b01..ed9228b202 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -171,6 +171,7 @@ packageExtensionsChecksum: sha256-1pgKZxx87NNMe1poF5N5u5kZB/qlEyILBQPxofM1shE=
 
 patchedDependencies:
   decode-uri-component@0.5.0: 44dc7ee3ec754d20fab8b07d7efd2442940d872ab7e8c3b61386a3d344fa3ac8
+  expo-dev-launcher@57.0.19: eb0bf1f0bd20f73906c3d8c5b8b60ec09d57b15317dbf94627f91d1edc2d8657
   expo-router@57.0.20: cb9f4edbfee501a4ddee6ca351900b2c18be660bc2e956687352236683980153
   expo-server-sdk: 7850520582b5b394397b35d1ea195192fe78589d8a6a748fe15177b818c4ed0b
   expo-task-manager@57.0.16: 7b144f9d84c386dfc1bc93db75d62887c20db3f652bad1f5c01b01ebb531315c
@@ -31301,7 +31302,7 @@ snapshots:
   expo-dev-client@57.0.18(expo@57.0.21)(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6)):
     dependencies:
       expo: 57.0.21(@babel/core@7.29.7)(@expo/metro-runtime@57.0.15)(bufferutil@4.1.0)(expo-router@57.0.20)(expo-widgets@57.0.18)(react-dom@19.2.6(react@19.2.3))(react-native-worklets@0.10.1(@babel/core@7.29.7)(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))(react@19.2.3))(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))(react@19.2.3)(typescript@6.0.3)(utf-8-validate@6.0.6)
-      expo-dev-launcher: 57.0.19(expo@57.0.21)(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))
+      expo-dev-launcher: 57.0.19(patch_hash=eb0bf1f0bd20f73906c3d8c5b8b60ec09d57b15317dbf94627f91d1edc2d8657)(expo@57.0.21)(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))
       expo-dev-menu: 57.0.18(expo@57.0.21)(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))
       expo-dev-menu-interface: 57.0.0(expo@57.0.21)
       expo-manifests: 57.0.1(expo@57.0.21)
@@ -31309,7 +31310,7 @@ snapshots:
     transitivePeerDependencies:
       - react-native
 
-  expo-dev-launcher@57.0.19(expo@57.0.21)(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6)):
+  expo-dev-launcher@57.0.19(patch_hash=eb0bf1f0bd20f73906c3d8c5b8b60ec09d57b15317dbf94627f91d1edc2d8657)(expo@57.0.21)(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6)):
     dependencies:
       '@expo/schema-utils': 57.0.2
       expo: 57.0.21(@babel/core@7.29.7)(@expo/metro-runtime@57.0.15)(bufferutil@4.1.0)(expo-router@57.0.20)(expo-widgets@57.0.18)(react-dom@19.2.6(react@19.2.3))(react-native-worklets@0.10.1(@babel/core@7.29.7)(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))(react@19.2.3))(react-native@0.86.3(patch_hash=80d299ea0bcfd0cff3f7749611f42ee55953ed7e7456552820693b83a0853ebc)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))(react@19.2.3)(typescript@6.0.3)(utf-8-validate@6.0.6)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 98b3502d97..4f3cd0cae5 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -215,6 +215,7 @@ packageExtensions:
 patchedDependencies:
   # query-string 7 requires this dependency as CommonJS. Keep the 0.5.0 security fix.
   decode-uri-component@0.5.0: patches/decode-uri-component@0.5.0.patch
+  expo-dev-launcher@57.0.19: patches/expo-dev-launcher@57.0.19.patch
   # Repo-local features the SDK lacks, carried onto each SDK patch release:
   # router — unhandled deep links when getInitialURL resolves later;
   # widgets — Live Activity state query (getInfo), areLiveActivitiesEnabled,