From 80cd57585d7e5ca19c9a495bb34cf3bda8b5d872 Mon Sep 17 00:00:00 2001
From: Alex <me@pixp.cc>
Date: Sun, 11 Oct 2026 11:29:41 -0700
Subject: [PATCH] fix(mobile): separate unfolded thread list from header
 (#13088)

---
 apps/mobile/src/lib/mobileTheme.test.ts       | 23 ++++++++++++++++---
 .../src/lib/mobileThemeVariables.test.ts      |  4 ++--
 apps/mobile/src/lib/mobileThemeVariables.ts   |  1 +
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/apps/mobile/src/lib/mobileTheme.test.ts b/apps/mobile/src/lib/mobileTheme.test.ts
index 1c7643f98957211a814c089081567788db169f3c..c1b4ce553fddd2b7943fdf0eaf4e7f73e6a9b473 100644
--- a/apps/mobile/src/lib/mobileTheme.test.ts
+++ b/apps/mobile/src/lib/mobileTheme.test.ts
@@ -158,6 +158,21 @@ describe("mobile themes", () => {
     }
   });
 
+  it.each(MOBILE_THEME_IDS)("keeps %s sidebar text readable on Android", (themeId) => {
+    for (const appearance of ["light", "dark"] as const) {
+      const variables = getMobileThemeRuntimeVariables(themeId, appearance, "android");
+      for (const foreground of [
+        "--color-drawer-foreground",
+        "--color-drawer-foreground-muted",
+      ] as const) {
+        expect(
+          contrastRatio(variables[foreground], variables["--color-drawer"]),
+          `${appearance}: ${foreground}`,
+        ).toBeGreaterThanOrEqual(4.5);
+      }
+    }
+  });
+
   it("applies palette overrides on top of the selected built-in theme", () => {
     const variables = getMobileThemeVariables("ocean", "dark", {
       "--color-primary": "#123456",
@@ -182,9 +197,11 @@ describe("mobile themes", () => {
           runtime[platform === "android" ? "--color-header" : "--color-drawer"],
           runtime["--color-screen"],
         );
-        expect(relativeLuminance(sidebar)).toBeLessThan(
-          relativeLuminance(runtime["--color-thread-canvas"]),
-        );
+        if (platform === "ios") {
+          expect(relativeLuminance(sidebar)).toBeLessThan(
+            relativeLuminance(runtime["--color-thread-canvas"]),
+          );
+        }
         expect(contrastRatio(chrome, runtime["--color-screen"])).toBeGreaterThanOrEqual(1.06);
         const foregroundRoles =
           platform === "android"
diff --git a/apps/mobile/src/lib/mobileThemeVariables.test.ts b/apps/mobile/src/lib/mobileThemeVariables.test.ts
index 1fecf3074b44ab79b5ca324edcd6f6f4d50b9aec..c3e275f3dc0ce33d2c85769837b71c0fdb7d77a5 100644
--- a/apps/mobile/src/lib/mobileThemeVariables.test.ts
+++ b/apps/mobile/src/lib/mobileThemeVariables.test.ts
@@ -24,7 +24,7 @@ describe("mobile theme runtime variables", () => {
   });
 
   it.each(MOBILE_THEME_IDS)(
-    "keeps %s colors on Android with an opaque Material frame",
+    "uses a screen-colored %s sidebar beneath an opaque Android frame",
     (themeId) => {
       for (const appearance of ["light", "dark"] as const) {
         const base = getMobileThemeVariables(
@@ -43,6 +43,7 @@ describe("mobile theme runtime variables", () => {
             1,
           ),
           "--color-header-foreground": base["--color-drawer-foreground"],
+          "--color-drawer": base["--color-screen"],
         });
         expect(android["--color-header"]).toMatch(/^rgba\(\d+, \d+, \d+, 1\)$/);
       }
@@ -76,7 +77,6 @@ describe("mobile theme runtime variables", () => {
           expect(ios["--color-header-foreground"]).toBe(ios["--color-drawer-foreground"]);
         } else {
           expect(ios).toEqual(getMobileThemeVariables("t3-code", appearance));
-          expect(ios["--color-drawer"]).toBe(android["--color-drawer"]);
           expect(ios["--color-drawer"]).toBe("#000000");
           expect(ios["--color-thread-canvas"]).toBe("#0a0a0a");
         }
diff --git a/apps/mobile/src/lib/mobileThemeVariables.ts b/apps/mobile/src/lib/mobileThemeVariables.ts
index 15096c0fd1bcada1b7ffd64802011b3b2eb99c14..8fd82955b7390fe3bc7154644c07205a7441a647 100644
--- a/apps/mobile/src/lib/mobileThemeVariables.ts
+++ b/apps/mobile/src/lib/mobileThemeVariables.ts
@@ -48,5 +48,6 @@ export function getMobileThemeRuntimeVariables(
     ...variables,
     "--color-header": frame,
     "--color-header-foreground": variables["--color-drawer-foreground"],
+    "--color-drawer": variables["--color-screen"],
   };
 }
-- 
2.54.0