From 6edff1613ca6a653ee12455cacb6acdfb13f5bd0 Mon Sep 17 00:00:00 2001
From: Andrej Spielmann <andrej@mac.fritz.box>
Date: Thu, 26 Mar 2026 14:57:49 +0100
Subject: [PATCH] feat(pwa): add mobile optimizations (safe areas, touch
 targets, standalone mode)

---
 frontend/src/app/globals.css | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index faa4546..b6263fa 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -145,4 +145,30 @@
 ::-webkit-scrollbar-thumb:hover {
     background: oklch(0.5 0 0 / 35%);
 }
-}
\ No newline at end of file
+}
+/* Mobile/PWA Optimizations */
+html { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
+
+/* iOS Safe Areas */
+body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
+
+/* Prevent zoom on input focus */
+input, select, textarea { font-size: 16px; }
+
+/* Hide scrollbar on mobile */
+@media (max-width: 768px) {
+  ::-webkit-scrollbar { display: none; }
+  body { scrollbar-width: none; }
+}
+
+/* Minimum touch target 44x44px */
+button, a, input, select, textarea, [role="button"] { min-height: 44px; min-width: 44px; }
+
+/* Disable hover effects on touch devices */
+@media (hover: none) { *:hover { transform: none !important; } }
+
+/* PWA standalone mode styles */
+@media (display-mode: standalone) {
+  html { height: 100vh; height: 100dvh; }
+  body { overflow: hidden; position: fixed; width: 100%; height: 100%; }
+}