From b095d9de1cfbc2427fac60e157a4a27955db15f6 Mon Sep 17 00:00:00 2001
From: Pepe Ziberi <pepe@lageplan.ch>
Date: Thu, 23 Jul 2026 20:17:31 +0200
Subject: [PATCH] fix(admin): Mobil-Layout der Administration entzerrt (v1.8.4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tab-Leiste (7 Tabs) war auf dem Handy in grid-cols-7 gequetscht/überlappend →
  jetzt horizontal scrollbar (flex/overflow-x-auto), ab md wieder 7-spaltiges Grid
- Header responsiv: "Zurück"-Text nur ab sm, Name kürzt (truncate), Rollen-Badge nur ab sm,
  kleinere Paddings

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 package.json           |  2 +-
 src/app/admin/page.tsx | 32 +++++++++++++++-----------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 4abe2de..76e7965 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lageplan",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
   "private": true,
   "scripts": {
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 840de10..5432e30 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -57,33 +57,31 @@ export default function AdminPage() {
   return (
     <div className="min-h-screen bg-background">
       {/* Header */}
-      <header className="h-14 border-b border-border bg-card flex items-center justify-between px-6">
-        <div className="flex items-center gap-4">
+      <header className="h-14 border-b border-border bg-card flex items-center justify-between px-3 md:px-6 gap-2">
+        <div className="flex items-center gap-2 md:gap-4 min-w-0">
           <Link href="/app">
-            <Button variant="ghost" size="sm">
-              <ArrowLeft className="w-4 h-4 mr-2" />
-              Zurück zur App
+            <Button variant="ghost" size="sm" className="px-2 shrink-0">
+              <ArrowLeft className="w-4 h-4 md:mr-2" />
+              <span className="hidden sm:inline">Zurück zur App</span>
             </Button>
           </Link>
-          <div className="h-6 w-px bg-border" />
-          <div className="flex items-center gap-2">
-            <MapPin className="w-5 h-5 text-primary" />
-            <h1 className="font-semibold text-lg">Administration</h1>
+          <div className="hidden sm:block h-6 w-px bg-border" />
+          <div className="flex items-center gap-2 min-w-0">
+            <MapPin className="w-5 h-5 text-primary shrink-0" />
+            <h1 className="font-semibold text-base md:text-lg truncate">Administration</h1>
           </div>
         </div>
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-2 text-sm">
-            <Shield className="w-4 h-4 text-primary" />
-            <span className="font-medium">{user.name}</span>
-            <span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">{user.role}</span>
-          </div>
+        <div className="flex items-center gap-2 text-sm min-w-0 shrink-0">
+          <Shield className="w-4 h-4 text-primary shrink-0 hidden sm:block" />
+          <span className="font-medium truncate max-w-[100px] md:max-w-none">{user.name}</span>
+          <span className="hidden sm:inline text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">{user.role}</span>
         </div>
       </header>
 
       <div className="container mx-auto py-6 px-4 max-w-7xl">
         <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
           {isServerAdmin ? (
-            <TabsList className="grid w-full grid-cols-7 max-w-4xl">
+            <TabsList className="w-full max-w-4xl h-auto flex flex-nowrap overflow-x-auto justify-start md:grid md:grid-cols-7 [&>button]:shrink-0 [&>button]:whitespace-nowrap">
               <TabsTrigger value="tenants" className="gap-2"><Shield className="w-4 h-4" />Mandanten</TabsTrigger>
               <TabsTrigger value="projects" className="gap-2"><Map className="w-4 h-4" />Einsätze</TabsTrigger>
               <TabsTrigger value="icons" className="gap-2"><ImageIcon className="w-4 h-4" />Symbole</TabsTrigger>
@@ -93,7 +91,7 @@ export default function AdminPage() {
               <TabsTrigger value="settings" className="gap-2"><Settings className="w-4 h-4" />System</TabsTrigger>
             </TabsList>
           ) : (
-            <TabsList className="grid w-full grid-cols-7 max-w-4xl">
+            <TabsList className="w-full max-w-4xl h-auto flex flex-nowrap overflow-x-auto justify-start md:grid md:grid-cols-7 [&>button]:shrink-0 [&>button]:whitespace-nowrap">
               <TabsTrigger value="org" className="gap-2"><Building2 className="w-4 h-4" />Organisation</TabsTrigger>
               <TabsTrigger value="users" className="gap-2"><Users className="w-4 h-4" />Benutzer</TabsTrigger>
               <TabsTrigger value="icons" className="gap-2"><ImageIcon className="w-4 h-4" />Symbole</TabsTrigger>