From 6ea021d284ec07b0da0a1da7ced100bc10a92ec5 Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Wed, 15 Apr 2026 22:21:13 +0800
Subject: [PATCH] Inline drawer-header colors to fix iOS invisible text

iOS WebKit intermittently fails to resolve Tailwind's CSS-variable-based
color utilities (text-foreground, text-muted, bg-background) in this
specific stacking context (fixed + nested absolute + rounded-t-3xl +
overflow-hidden). Text was rendering with an unresolved color, making it
invisible but still selectable/copyable.

Inline hex values bypass the variable chain and force the resolved color.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 components/PageReader.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/PageReader.tsx b/components/PageReader.tsx
index 719a4d2..2097796 100644
--- a/components/PageReader.tsx
+++ b/components/PageReader.tsx
@@ -675,15 +675,24 @@ export function PageReader({
             className="absolute bottom-0 left-0 right-0 max-h-[75vh] bg-background rounded-t-3xl shadow-2xl overflow-hidden"
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="bg-background border-b border-border">
+            <div
+              className="border-b border-border"
+              style={{ backgroundColor: "#ffffff" }}
+            >
               <div className="flex justify-center pt-2.5 pb-1.5">
                 <div className="w-10 h-1 rounded-full bg-muted/40" />
               </div>
               <div className="px-5 py-3 flex items-center justify-between">
-                <span className="text-foreground text-base font-bold">
+                <span
+                  className="text-base font-bold"
+                  style={{ color: "#202124" }}
+                >
                   Chapters
                 </span>
-                <span className="text-xs text-muted tabular-nums">
+                <span
+                  className="text-xs tabular-nums"
+                  style={{ color: "#888888" }}
+                >
                   {chapters.length} total
                 </span>
               </div>