From 67b9ab6b16d6d5c7d46acc8626ecb6b77db7be12 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Sat, 18 Apr 2026 13:35:42 +0530
Subject: [PATCH] fix: font size slider in mobile

---
 app/globals.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/app/globals.css b/app/globals.css
index 4c530da9..53c43cfd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -144,30 +144,79 @@
     font-family: Georgia, "Times New Roman", "Noto Serif", serif;
 }
 
-/* Font size scaling — zoom on main + aside so rem-based Tailwind classes scale */
+/*
+ * Font size scaling — uses zoom on main + aside.
+ * zoom is supported in all major browsers including iOS Safari (Apple invented it).
+ * -webkit-text-size-adjust prevents iOS from auto-scaling text in landscape.
+ */
 .reading-fs-xs main,
 .reading-fs-xs aside {
     zoom: 0.8;
+    -webkit-text-size-adjust: 80%;
 }
 .reading-fs-sm main,
 .reading-fs-sm aside {
     zoom: 0.9;
+    -webkit-text-size-adjust: 90%;
 }
 .reading-fs-base main,
 .reading-fs-base aside {
     zoom: 1;
+    -webkit-text-size-adjust: 100%;
 }
 .reading-fs-lg main,
 .reading-fs-lg aside {
     zoom: 1.12;
+    -webkit-text-size-adjust: 112%;
 }
 .reading-fs-xl main,
 .reading-fs-xl aside {
     zoom: 1.25;
+    -webkit-text-size-adjust: 125%;
 }
 .reading-fs-2xl main,
 .reading-fs-2xl aside {
     zoom: 1.4;
+    -webkit-text-size-adjust: 140%;
+}
+
+/* Fallback for browsers that don't support zoom (Firefox < 126) */
+@supports not (zoom: 1.1) {
+    .reading-fs-xs main,
+    .reading-fs-xs aside {
+        transform: scale(0.8);
+        transform-origin: top left;
+        width: 125%;
+    }
+    .reading-fs-sm main,
+    .reading-fs-sm aside {
+        transform: scale(0.9);
+        transform-origin: top left;
+        width: 111.11%;
+    }
+    .reading-fs-base main,
+    .reading-fs-base aside {
+        transform: none;
+        width: auto;
+    }
+    .reading-fs-lg main,
+    .reading-fs-lg aside {
+        transform: scale(1.12);
+        transform-origin: top left;
+        width: 89.28%;
+    }
+    .reading-fs-xl main,
+    .reading-fs-xl aside {
+        transform: scale(1.25);
+        transform-origin: top left;
+        width: 80%;
+    }
+    .reading-fs-2xl main,
+    .reading-fs-2xl aside {
+        transform: scale(1.4);
+        transform-origin: top left;
+        width: 71.43%;
+    }
 }
 
 /* Justified text — only main content */