From 105cb6831665d1b713bede3b724e99e6e7dd2af4 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Tue, 25 Aug 2026 23:01:08 +0200
Subject: [PATCH] fix(mobile): text fields no longer show a dark box inside
 their row

iOS paints its own background inside a text control, and under color-scheme:
dark that fill is darker than the card the field sits on. The mobile fields
are deliberately bg-transparent because the row supplies the surface - which
is why the native fill has nothing covering it and shows through as a dark
rectangle, while a desktop field hides it behind its own background.

Closes #2028
---
 client/src/mobile/mobile.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/client/src/mobile/mobile.css b/client/src/mobile/mobile.css
index 3b2ac8ee2..6f6049769 100644
--- a/client/src/mobile/mobile.css
+++ b/client/src/mobile/mobile.css
@@ -340,3 +340,26 @@
 .m-root .maplibregl-ctrl-bottom-right {
   bottom: var(--bottom-nav-h);
 }
+
+/* Text fields carry the row's background, not their own.
+ *
+ * iOS paints its own background inside a text control, and under
+ * `color-scheme: dark` that fill is darker than the card the field sits on —
+ * so every field showed as a dark rectangle inside a lighter row (#2028). The
+ * mobile fields are deliberately `bg-transparent` because the row around them
+ * supplies the surface, which is exactly why the native fill has nothing
+ * covering it here and shows through; a desktop field hides it behind its own
+ * background. Dropping the native appearance is what actually removes it.
+ *
+ * Only text entry. `file`, `color`, `range` and the date/time pickers need
+ * their native chrome to stay usable, and `select` keeps its own arrow. */
+.m-root input:not([type]),
+.m-root input[type="text"],
+.m-root input[type="password"],
+.m-root input[type="email"],
+.m-root input[type="url"],
+.m-root input[type="search"],
+.m-root textarea {
+  -webkit-appearance: none;
+  appearance: none;
+}