From 4fa325f4f3b3f2ead641479b493d3d5bcfef2498 Mon Sep 17 00:00:00 2001
From: spinline <bilal.karatatr.@gmail.com>
Date: Sun, 1 Feb 2026 17:00:41 +0300
Subject: [PATCH] fix(ui): improve theme selector dismissal behavior on mobile

---
 frontend/input.css                          | 7 +++++++
 frontend/public/tailwind.css                | 8 +++++++-
 frontend/src/components/layout/statusbar.rs | 5 +++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/input.css b/frontend/input.css
index 47ab6a5..81595b8 100644
--- a/frontend/input.css
+++ b/frontend/input.css
@@ -8,4 +8,11 @@
     body {
         @apply min-h-[100dvh] w-full overflow-hidden bg-base-100 text-base-content overscroll-y-none;
     }
+}
+
+/* Fix for iOS click/blur events */
+@media (hover: none) {
+    body {
+        cursor: pointer;
+    }
 }
\ No newline at end of file
diff --git a/frontend/public/tailwind.css b/frontend/public/tailwind.css
index f6be0df..943d5fd 100644
--- a/frontend/public/tailwind.css
+++ b/frontend/public/tailwind.css
@@ -2388,13 +2388,19 @@
 }
 @layer base {
   html, body {
-    height: 100%;
+    min-height: 100dvh;
     width: 100%;
     overflow: hidden;
+    overscroll-behavior-y: none;
     background-color: var(--color-base-100);
     color: var(--color-base-content);
   }
 }
+@media (hover: none) {
+  body {
+    cursor: pointer;
+  }
+}
 @layer base {
   :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
     color-scheme: light;
diff --git a/frontend/src/components/layout/statusbar.rs b/frontend/src/components/layout/statusbar.rs
index 1ceeff1..e96c4a7 100644
--- a/frontend/src/components/layout/statusbar.rs
+++ b/frontend/src/components/layout/statusbar.rs
@@ -52,6 +52,11 @@ pub fn StatusBar() -> impl IntoView {
                                                         }
                                                     }
                                                 }
+
+                                                // Close the dropdown by blurring the active element
+                                                if let Some(active) = doc.active_element() {
+                                                    let _ = active.blur();
+                                                }
                                             }
                                         >
                                             {theme}