fix: tabs offset from top follows header height

frontend/src/app/globals.css

@@ -387,4 +387,7 @@
   .tab-inactive {
     @apply text-secondary bg-interactive-hover border-b-3 border-transparent hover:border-intense;
   }
+  .sticky-tabs {
+    top: var(--header-height);
+  }
 }

frontend/src/components/Header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ThemeSwitcher from "@/components/utils/ThemeSwitcher";
 import WifiQrModal from "@/components/modals/WifiQrModal";
 import { generateWifiConfig, WifiConfig } from "@/utils/wifi";
@@ -8,6 +8,23 @@ import { generateWifiConfig, WifiConfig } from "@/utils/wifi";
 export default function Header() {
   const [showWifi, setShowWifi] = useState(false);
   const [wifiConfig, setWifiConfig] = useState<WifiConfig | null>(null);
+  const headerRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    // Set initial height and update on resize
+    function updateHeaderHeight() {
+      if (headerRef.current) {
+        document.documentElement.style.setProperty(
+          "--header-height",
+          `${headerRef.current.offsetHeight}px`,
+        );
+      }
+    }
+
+    updateHeaderHeight();
+    window.addEventListener("resize", updateHeaderHeight);
+    return () => window.removeEventListener("resize", updateHeaderHeight);
+  }, []);
 
   useEffect(() => {
     const config: WifiConfig | null = (() => {
@@ -23,7 +40,10 @@ export default function Header() {
   }, [generateWifiConfig]);
 
   return (
-    <header className="bg-surface border-b border-default sticky top-0 z-7000">
+    <header
+      ref={headerRef}
+      className="bg-surface border-b border-default sticky top-0 z-7000"
+    >
       <div className="max-w-95/100 mx-auto flex-center-between px-4 py-4">
         <h1 className="text-xl md:text-2xl font-semibold text-brand">
           UniFi Voucher Manager

frontend/src/components/tabs/Tabs.tsx

@@ -43,7 +43,7 @@ export default function Tabs() {
 
   return (
     <>
-      <nav className="bg-surface border-b border-default flex sticky top-16 z-2000 shadow-soft dark:shadow-soft-dark">
+      <nav className="bg-surface border-b border-default flex sticky sticky-tabs z-2000 shadow-soft dark:shadow-soft-dark">
         {enabledTabs.map((tabConfig) => (
           <button
             key={tabConfig.id}