From 2f8b911af8b3d10c7b2633f6ff8f3f359b337c66 Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Fri, 13 Mar 2026 17:28:13 +0100
Subject: [PATCH] Fix datetime-local input overflow and invisible text on iOS
 Safari

The native datetime-local picker on iOS Safari has an intrinsic min-width
that exceeds the form container, and its webkit pseudo-elements don't
inherit the glass text color, making the selected value invisible.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/main.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 88f558b..bdb327e 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -162,11 +162,32 @@ textarea.form-field {
   min-height: 5rem;
 }
 
+/* iOS Safari: datetime-local overflows container and shows empty when no value */
+input[type="datetime-local"].form-field {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+input[type="datetime-local"].form-field.glass::-webkit-date-and-time-value {
+  color: var(--color-text-on-gradient);
+  text-align: left;
+}
+
+input[type="datetime-local"].form-field.glass::-webkit-datetime-edit {
+  color: var(--color-text-on-gradient);
+}
+
+input[type="datetime-local"].form-field.glass::-webkit-datetime-edit-fields-wrapper {
+  color: var(--color-text-on-gradient);
+}
+
 /* Form group (label + input) */
 .form-group {
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
+  overflow: hidden;
 }
 
 .form-label {