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>
Remove manual -webkit-backdrop-filter prefixes
2026-03-13 17:28:13 +01:00 · 2026-03-13 17:03:33 +01:00 · 2026-03-13 17:03:15 +01:00 · 2026-03-13 17:03:04 +01:00
7 changed files with 28 additions and 8 deletions
--- a/2
+++ b/2
@@ -1,5 +1,5 @@
 # Stage 1: Build frontend
-FROM node:24-alpine AS frontend-build
+FROM node:25-alpine AS frontend-build
 WORKDIR /app/frontend
 COPY frontend/package.json frontend/package-lock.json ./
 RUN npm ci
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -53,6 +53,12 @@
    "vitest": "^4.0.18",
    "vue-tsc": "^3.2.5"
  },
+  "browserslist": [
+    ">= 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead"
+  ],
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  }
--- 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 {
@@ -244,7 +265,6 @@ textarea.form-field {
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
 }

 .glass:hover:not(input):not(textarea):not(.btn-primary) {
@@ -256,7 +276,6 @@ textarea.form-field {
 .glass-inner {
  background: var(--color-glass-inner);
  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
 }

 /* Glow border: conic gradient wrapper with halo (static) */
--- a/frontend/src/components/BottomSheet.vue
+++ b/frontend/src/components/BottomSheet.vue
@@ -107,7 +107,6 @@ function onTouchEnd() {
  border: 1px solid var(--color-glass-border);
  border-bottom: none;
  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px 20px 0 0;
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
  width: 100%;
--- a/frontend/src/components/ConfirmDialog.vue
+++ b/frontend/src/components/ConfirmDialog.vue
@@ -87,7 +87,6 @@ watch(
  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: var(--spacing-xl);
--- a/frontend/src/components/RsvpBar.vue
+++ b/frontend/src/components/RsvpBar.vue
@@ -154,7 +154,6 @@ watch(expanded, (isExpanded) => {
  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-card);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--shadow-card);
@@ -206,7 +205,6 @@ watch(expanded, (isExpanded) => {
  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -496,7 +496,6 @@ onMounted(fetchEvent)
  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
 }

 .detail__meta-text {
Author	SHA1	Message	Date
nitrix	2f8b911af8	Fix datetime-local input overflow and invisible text on iOS Safari All checks were successful CI / backend-test (push) Successful in 1m2s Details CI / frontend-test (push) Successful in 26s Details CI / frontend-e2e (push) Successful in 1m36s Details CI / build-and-publish (push) Successful in 1m16s Details 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>	2026-03-13 17:28:13 +01:00
nitrix	e9791de4e2	Remove manual -webkit-backdrop-filter prefixes LightningCSS (Vite 8) was stripping the unprefixed backdrop-filter when it saw the manual -webkit- prefix, breaking blur effects in Firefox and on production. Let LightningCSS handle prefixing automatically. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-13 17:03:33 +01:00
nitrix	3b4cc7fbb9	Add explicit browserslist to frontend package.json Ensures deterministic CSS output across build environments (local vs Docker/Alpine) by pinning browser targets. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-13 17:03:15 +01:00
nitrix	9c0e9249ce	Upgrade Docker frontend stage from Node 24 to Node 25 Aligns the Docker build environment with the local development setup which already uses Node 25. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-13 17:03:04 +01:00