adminpepe/Lageplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): Mobil-Layout der Administration entzerrt (v1.8.4)

Browse Source 
- 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>
This commit is contained in:
Pepe Ziberi
2026-07-23 20:17:31 +02:00
parent ae78b2d878
commit b095d9de1c
2 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -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": {

32
src/app/admin/page.tsx
View File

@@ -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>