fix: iOS scrolling and safe areas

frontend/src/app/globals.css

@@ -285,14 +285,6 @@
 /* 2. Base layer: resets, defaults, theming, scrollbar */
 /* -------------------------------------------------- */
 @layer base {
-  html {
-    font-family: var(--font-system);
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    scroll-behavior: smooth;
-  }
-
   * {
     @apply transition duration-200 ease-in-out;
   }
@@ -300,8 +292,35 @@
     @apply transition-none;
   }
 
+  html {
+    font-family: var(--font-system);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    scroll-behavior: smooth;
+
+    /* Make non-scrollable */
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    touch-action: none;
+
+    @apply bg-page;
+  }
+
   body {
-    @apply bg-page text-primary min-h-screen flex flex-col;
+    /* Make sure to respect iOS safe areas */
+    height: 100%;
+    min-height: 100vh;
+    min-height: 100dvh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    /* Add support for safe areas */
+    padding: env(safe-area-inset-top) env(safe-area-inset-right)
+      env(safe-area-inset-bottom) env(safe-area-inset-left);
+
+    @apply bg-page text-primary;
   }
 
   /* touch feedback */
@@ -380,12 +399,4 @@
   .flex-center {
     @apply flex items-center justify-center;
   }
-
-  /* Safe area padding for iOS */
-  .safe-top {
-    padding-top: env(safe-area-inset-top);
-  }
-  .safe-bottom {
-    padding-bottom: env(safe-area-inset-bottom);
-  }
 }

frontend/src/app/page.tsx

@@ -4,7 +4,7 @@ import Tabs from "@/components/tabs/Tabs";
 
 export default function Home() {
   return (
-    <div className="h-screen flex flex-col bg-page">
+    <div className="min-h-screen min-h-dvh flex flex-col">
       <NotificationContainer />
       <Header />
       <Tabs />

frontend/src/components/Header.tsx

@@ -2,7 +2,7 @@ import ThemeSwitcher from "@/components/utils/ThemeSwitcher";
 
 export default function Header() {
   return (
-    <header className="bg-surface border-b border-default safe-top sticky top-0 z-7000">
+    <header className="bg-surface border-b border-default sticky top-0 z-7000">
       <div className="max-w-95/100 mx-auto flex items-center justify-between px-4 py-4">
         <h1 className="text-xl md:text-2xl font-semibold text-brand">
           UniFi Voucher Manager