# Mobile-Audit: Admin-Bereich der TrueAngels Suite

**Datum:** 12.08.2026
**Scope:** `src/app/(admin)/` (555 .tsx-Dateien) + relevante `src/features/`-Komponenten (gesamt 745 .tsx)
**Zielgeräte:** Android-Smartphones, 360–430 px Breite
**Zielgruppe:** Vorstand & Team (Daten ansehen, bearbeiten, neu anlegen — insbesondere im Außeneinsatz)
**Methode:** Grep-Muster-Scans (Tabellen, feste Breiten, Grids, Touch-Targets, hidden-Patterns, Dialoge) + manuelle Vertiefung in den 5 Außeneinsatz-Modulen workflow, auslagen, mitglieder, lager, projekte sowie Basis-Komponenten (Sidebar, MainContent, BottomNav, Header, table, responsive-table, tabs, dialog, button)

---

## 1. Zusammenfassung

**Gesamtbild: Sehr guter Mobile-Stand — mit gezielten Schwachstellen.**

Die Codebasis ist erkennbar mobile-bewusst gebaut:

- **ResponsiveTable** (`src/components/ui/responsive-table.tsx`) rendert auf `<sm` automatisch Karten statt Tabellen — die meisten Listenmodule nutzen das (auslagen, mitglieder, workflow, lager, spenden, spender, sepa, partner, foerderungen, soziales, dokumente, ehrenamtsstunden, ladelisten, transport u.v.m.).
- **Button-Designsystem** erzwingt `min-h-[44px]` auf Mobile (default & sm) — primäre Aktionen sind überall gut tappbar.
- **Header/`flex-col sm:flex-row`-Muster** für Seitenkopfe + Filter sind durchgängig.
- **Mobile-Karten-Ansichten** (`md:hidden`) existieren für lager/bestand, lager/bewegungen, auslagen — das ist genau das richtige Muster.
- **Keine einzige feste Breite > 430 px** (w-[…px], min-w-[…px], min-w-max) im gesamten Admin + Features.
- **Kein einziges `hidden sm:flex`/`hidden md:flex`, das Aktionen versteckt** — Suchfelder/Filter/Aktionen sind auf Mobile sichtbar.
- **Dialoge** sind alle `w-full`-basiert (keine feste Breite > 430 px); `sm:max-w-[450px]`-Varianten sind korrekt prefixiert.

**Aber:** Es gibt 1 echten P0-Bug (abgeschnittene Tabelle ohne Scroll), 5–6 P1-Probleme, die den Außeneinsatz konkret behindern (zu kleine Freigabe-Buttons, Tab-Leiste abgeschnitten, Overlap durch Bottom-Nav, Überlauf im Projekt-Card-Layout), sowie eine Reihe von P2-Polituren.

---

## 2. Priorisierte Fix-Liste

### 🔴 P0 — bricht die Seite auf Mobile

#### P0-1: Kostenstellen-Tabellen werden abgeschnitten (kein Scroll möglich)
- **Datei:** `src/app/(admin)/buchhaltung/kostenstellen/page.tsx` (Zeilen 261 und 335)
- **Problem:** Zwei rohe `<table>` (7 Spalten: Name, Buchungen, Soll, Haben, Saldo, Status, Aktionen) liegen direkt in `<Card padding="none" className="overflow-hidden">` — **ohne** `overflow-x-auto`. Auf 360–430 px wird die Tabelle **hart abgeschnitten** statt scrollbar: Saldo-Spalte und die Bearbeiten/Löschen-Buttons sind unerreichbar, Daten nicht lesbar. `overflow-hidden` ist hier aktiv schädlich.
- **Fix:** Tabellen in `<div className="overflow-x-auto">` wrappen (Muster existiert in `lager/inventur/page-content.tsx:184`) oder `overflow-hidden` durch `overflow-x-auto` auf der Card ersetzen.

---

### 🟠 P1 — unschön bzw. funktional eingeschränkt, Außeneinsatz-relevant

#### P1-1: Freigabe/Aufgaben-Buttons zu klein (Kern-Aktion im Außeneinsatz!)
- **Dateien:**
  - `src/app/(admin)/workflow/genehmigungen/page-content.tsx` (Z. ~220–232: ThumbsUp/ThumbsDown)
  - `src/app/(admin)/workflow/aufgaben/page-content.tsx` (Z. ~254–281: Starten/Erledigen/Bearbeiten/Löschen)
  - `src/app/(admin)/workflow/automation/page.tsx` (Z. ~399–416: Testen/Bearbeiten/Aktivieren)
- **Problem:** Icon-Buttons mit `p-1.5` + `w-4 h-4`-Icons ⇒ ~26×26 px Touch-Fläche (empfohlen: 44 px). „Freigeben/Ablehnen“ ist die zentrale Vorstand-Aktion im Außeneinsatz — bei Bewegung/Fahrt schwer zu treffen, hohe Fehlbedienungs-Wahrscheinlichkeit. Da die Buttons auch in der Mobile-Kartenansicht von ResponsiveTable gerendert werden, betrifft es Mobile direkt.
- **Fix:** `p-2.5 min-w-[44px] min-h-[44px]` — das exakte Muster existiert bereits in `src/app/(admin)/lager/bestand/page-content.tsx` (Z. 205–225).

#### P1-2: Bottom-Navigation überdeckt Seitenende (global)
- **Datei:** `src/components/admin/MainContent.tsx`
- **Problem:** `<main className="py-6 sm:py-10">` hat kein unteres Padding für die feste `h-16`-BottomNav (`md:hidden`, in MainContent gerendert). Auf jeder Mobile-Seite können die letzten ~40 px Inhalt (Pagination-Leisten, Submit-Buttons, letzte Karte) hinter der Nav verschwinden.
- **Fix:** `pb-20 md:pb-10` (o. ä.) auf `<main>` ergänzen — eine Zeile, wirkt global.

#### P1-3: Projekt-Übersicht — Aktions-Button-Reihe läuft über und wird geclippt
- **Datei:** `src/app/(admin)/projekte/overview/page-content.tsx` (ProjectCard, Z. ~146–153)
- **Problem:** Drei Buttons (Abonnieren + „Förderantrag“ + „Details“) in `flex items-center gap-2` **ohne `flex-wrap`**, in einer `flex-shrink-0`-Spalte; die Card ist `overflow-hidden`. Bei 360 px (verfügbar ~304 px) ist die Reihe ~345 px breit ⇒ der/die letzte(n) Button(s) werden **abgeschnitten** und sind nicht erreichbar. Bei 430 px ist es grenzwertig.
- **Fix:** `flex-wrap justify-end` auf der Button-Reihe, oder die Aktions-Spalte auf Mobile unter die Info legen (`flex-col sm:flex-row`-Umstellung des Kopfbereichs).

#### P1-4: Projekt-Übersicht — Stats-Zeile läuft über
- **Datei:** `src/app/(admin)/projekte/overview/page-content.tsx` (ProjectCard, Z. ~133–153)
- **Problem:** `flex items-center gap-4` (Budget €x / €y + Spenden + offene Bedarfe) ohne `flex-wrap` ⇒ läuft bei 360 px über die `min-w-0`-Info-Spalte hinaus, wird durch `overflow-hidden` geclippt.
- **Fix:** `flex-wrap` ergänzen.

#### P1-5: Projekt-Übersicht — Tab-Leiste abgeschnitten (5 Tabs, kein Scroll)
- **Datei:** `src/app/(admin)/projekte/overview/page-content.tsx` (ProjectCard expanded, Z. ~180–190)
- **Problem:** `<TabsList>` (Details, Bedarfe, Updates, Interne Vermerke, Mitglieder) nutzt das Basis-Tabs-Component (`inline-flex`, `whitespace-nowrap`, **kein** `overflow-x-auto`) und liegt in einer `overflow-hidden`-Card ⇒ auf Mobile werden die letzten Tabs **abgeschnitten/unerreichbar** — „Mitglieder“ und „Interne Vermerke“ nicht aufrufbar.
- **Fix:** TabsList-Pattern aus `src/app/(admin)/einstellungen/page-content.tsx` (Z. 61) übernehmen: `w-full flex-nowrap overflow-x-auto [-webkit-overflow-scrolling:touch]` + `flex-shrink-0` auf den Triggern. Optional: gleiche Korrektur in `src/features/settings/components/UserManagementTab.tsx` (4 Tabs, P2).

#### P1-6: Inventur-Listen nur horizontal scrollbar (Datenvergleich im Feld unkomfortabel)
- **Dateien:** `src/app/(admin)/lager/inventur/page-content.tsx` (Z. 184), `src/app/(admin)/lager/inventur/[id]/page-content.tsx` (Z. 388)
- **Problem:** Rohe `<table>` mit 7 bzw. 6 Spalten in `overflow-x-auto` — funktioniert, aber im Außeneinsatz (Zählung per Handy) muss man ständig horizontal wischen; Soll/Ist-Vergleich ist auf einen Blick nicht möglich. Kein Datenverlust, daher P1 (Komfort) statt P0.
- **Fix (Empfehlung):** Mobile-Karten-Ansicht wie `lager/bestand` („Erwartet/Gezählt/Diff.“ prominent) oder Spalten via `hidden sm:table-cell` reduzieren.

---

### 🟡 P2 — Nice-to-have / Polishing

- **P2-1:** `src/app/(admin)/buchhaltung/abschluss/_components/AbschlussBilanzSection.tsx` (Z. 206, 238) — rohe `<table>` in `Card overflow-hidden` ohne Wrapper; lange Kontonamen/Beträge können bei 360 px geclippt werden. Fix: `overflow-x-auto`-Wrapper (Seite ist aber primär Desktop/Print).
- **P2-2:** `src/app/(admin)/finanzen/berichte/_components/BerichteReportContent.tsx` (Z. 66, 71, 76, 277) — `grid-cols-5` ohne Responsive-Prefix in Summen-Zeilen; bei 360 px eng (Beträge können umbrechen), aber nutzbar.
- **P2-3:** `src/app/(admin)/kalender/calendar-content.tsx` (Z. 292, 301) & `page-content.tsx` (Z. 221, 229) — `grid-cols-7` ist kalenderbedingt; Zellen ~47 px schmal, Event-Chips truncaten. Für eine Mobile-Kalenderansicht (Agenda-Liste) wäre ein `md:hidden`-Alternativ-Layout der Goldstandard.
- **P2-4:** Kleine Schließen/Icon-Buttons `p-1`/`p-1.5`:
  - `src/app/(admin)/lager/inventur/page-content.tsx` (Z. 149, 269)
  - `src/app/(admin)/nova-poshta/_components/NovaPoshtaCalculator.tsx` (Z. 56)
  - `src/features/office/components/DriveBrowser.tsx` (Z. 310, 464, 473)
  - `src/features/dashboard/components/KpiCard.tsx` (Z. 59)
  - `src/app/(admin)/workflow/automation/page.tsx` (Z. 535, Log-Modal-Close)
- **P2-5:** `src/features/settings/components/UserManagementTab.tsx` — 4 Tabs ohne Overflow-Fix (gleiche Lösung wie P1-5).
- **P2-6:** `src/app/(admin)/system/monitoring/monitoring-content.tsx` + `cron-job-row.tsx` — Desktop-Grid `sm:grid-cols-[1fr_1fr_120px_100px_auto]` mit Mobile-Fallback `grid-cols-[auto_1fr]` — bereits gut gelöst, nur Aktionen-Zeile auf sehr schmalen Geräten prüfen.
- **P2-7:** `src/features/admin-bulk-actions/components/BulkActionsBar.tsx` — `min-w-[320px]` passt für 360–430 px, bricht aber auf Geräten < 320 px; optional `min-w-0 max-w-[calc(100vw-1rem)]`.

**Geprüft und für gut befunden (keine Maßnahme nötig):**
- Alle Dialoge mit `sm:max-w-[450px]`/`sm:max-w-[500px]` (spendenquittungen, ehrenamtsstunden, archenoa-kinder) — Prefix greift erst ab 640 px.
- `NotificationDropdown` (w-80, rechtsbündig — passt), `DashboardGrid` (react-grid-layout bis xxs:320 / 1 Spalte), `sachspenden/page.tsx` (Mobile-Erfassung mit Barcode-Scanner, sauber), `Header.tsx` (Suche ab 2xs, 44-px-Hamburger), `Sidebar.tsx` (Mobile-Sheet mit 44-px-Targets, `max-w-[85vw]`), `Bewerber`-Tabelle (shadcn-Table mit internem `overflow-auto`), `MediaBrowser` (bewusste `hidden sm:table-cell`-Spaltenreduktion), `BuchungenTable`/`MatchPayPalDialog`/`SheetsManager`/`kassenbuch`/`spendenquittungen` (alle `overflow-x-auto`-gewrappt), `FinancialSummaryTable` (`overflow-auto`-Container).

---

## 3. Empfehlung: Diese 3–4 Seiten zuerst fixen

**Reihenfolge nach Außeneinsatz-Relevanz (Vorstand/Team unterwegs):**

1. **`/workflow/genehmigungen` + `/workflow/aufgaben`** (P1-1) — Die zentralen Entscheidungs-Aktionen des Vorstands. 26-px-Buttons sind im Feld (stehend, in Bewegung, kleine Displays) die größte Fehlerquelle. Fix: 2 Zeilen pro Datei (`p-2.5 min-w-[44px] min-h-[44px]`), Muster liegt in lager/bestand vor. → **sofort**
2. **`/projekte` (overview)** (P1-3, P1-4, P1-5) — Drei zusammenhängende Fixes in einer Datei: flex-wrap für Aktions- und Stats-Zeile + Overflow-Scroll für die Tab-Leiste. Ohne Fix sind „Förderantrag“/„Details“-Buttons und die Mitglieder-Tabs auf dem Handy unerreichbar. → **diese Woche**
3. **Global: `MainContent.tsx`** (P1-2) — Eine Zeile (`pb-20 md:pb-10`), behebt Overlap der Bottom-Nav auf **allen** Seiten; wirkt sofort auf die 5 Feldmodule. → **sofort**
4. **`/buchhaltung/kostenstellen`** (P0-1) — Der einzige echte P0 (Daten abgeschnitten, Aktionen unerreichbar). Zwar kein Kern-Feldmodul, aber der Fix ist trivial (overflow-Wrapper) und die Seite ist für die Buchhaltung unterwegs relevant. → **mitnehmen**

Danach (Komfort im Feld): `lager/inventur` Mobile-Karten (P1-6) und `kalender` Mobile-Ansicht (P2-3).

---

## 4. Geprüfte Dateien (Auswahl — 47 Dateien im Detail gelesen/scanned)

### Basis-Komponenten
- `src/components/admin/Sidebar.tsx`, `MainContent.tsx`, `Header.tsx`, `BottomNav.tsx`, `CommandPalette.tsx`, `NotificationDropdown.tsx`, `navigation-data.tsx`, `VersionBadge.tsx`
- `src/components/ui/table.tsx`, `responsive-table.tsx`, `button.tsx`, `tabs.tsx`, `dialog.tsx`, `sheet.tsx`, `bulk-actions.tsx`, `card.tsx`
- `src/app/(admin)/layout.tsx`, `tailwind.config.ts`

### Modul: workflow (Freigaben)
- `src/app/(admin)/workflow/page.tsx`, `workflow/genehmigungen/page-content.tsx`, `workflow/aufgaben/page-content.tsx`, `workflow/automation/page.tsx`

### Modul: auslagen
- `src/app/(admin)/auslagen/page-content.tsx`, `auslagen/page.tsx`, `auslagen/neu/page.tsx`, `auslagen/[id]/page-content.tsx`, `auslagen/[id]/bearbeiten/page-content.tsx`, `auslagen/[id]/pruefen/page-content.tsx`, `auslagen/[id]/freigeben/page-content.tsx`
- `src/features/expenses/components/ExpenseList.tsx`, `ExpenseEditForm.tsx`

### Modul: mitglieder
- `src/app/(admin)/mitglieder/page-content.tsx`, `mitglieder/[id]/page-content.tsx`
- `src/features/membership/components/MemberList.tsx`

### Modul: lager
- `src/app/(admin)/lager/page.tsx`, `lager/bestand/page-content.tsx`, `lager/bestand/[id]/page-content.tsx`, `lager/bewegungen/page-content.tsx`, `lager/sachspenden/page-content.tsx`, `lager/sachspenden/[id]/page-content.tsx`, `lager/inventur/page-content.tsx`, `lager/inventur/[id]/page-content.tsx`, `lager/ladelisten/page.tsx`, `lager/transport/page.tsx`, `lager/preismatrix/page-content.tsx`, `lager/preisvergleich/page.tsx`, `lager/ExportDropdown.tsx`
- `src/features/inventory/components/InventoryItemDialog.tsx`, `MaterialDonationDialog.tsx`, `DistributionNoteDialog.tsx`
- `src/features/logistics/components/CourierOrderDialog.tsx`, `NovaPoshtaShipmentDialog.tsx`, `TransportDialog.tsx`, `GrantTransferDialog.tsx`

### Modul: projekte
- `src/app/(admin)/projekte/overview/page-content.tsx`, `projekte/alle/page.tsx`, `projekte/fortschritt/page.tsx`, `projekte/neu/page.tsx`, `projekte/[slug]/edit/page.tsx`
- `src/features/projects/components/ProjectWizard.tsx`, `ProjectCard.tsx`, `ProjectSubscribeButton.tsx`

### Weitere Admin-Seiten (Scan)
- `buchhaltung/` (page, freigabe, buchungen, kassenbuch, kostenstellen, abschluss, berichte, monats-cockpit, doppelpruefung, kontenplan, paypal-abgleich, pp-tx-zuordnen, beleg-scan, wiederkehrend, assistent)
- `finanzen/` (page, uebersicht, berichte, budget, grant-transfers), `sepa/` (mandate, collection-runs, dunning), `spendenquittungen/` (Liste, Detail, Editor), `spenden-verwalten/`, `spender/`, `partner-verwalten/`, `foerderungen/`, `bedarfe/`, `spendenaufrufe/`, `ehrenamtsstunden/`, `vorstandswahlen/` (inkl. Vote), `kalender/`, `mitarbeiter-übergreifend: dokumente/`, `medien/`, `open-data/`, `dsgvo/`, `benachrichtigungen/`, `tickets/`, `bewerber/`, `system/` (health, monitoring, fehler, anomalien), `einstellungen/` (page-content, sichtbarkeit, signatur, feature-flags, berechtigungen), `wiki/`, `schulungen/`, `mandanten/`, `hilfe/`, `social/`, `newsletter/`, `nova-poshta/`, `archenoa-kinder/`, `ai-pricing/`, `sachspenden/page.tsx`, `paypal-sync/`, `gnucash-import/`, `dashboard/` (Grid, KPI-Widgets, Widgets)
- `src/features/` — transparency, finances, office (DriveBrowser, MediaBrowser, SheetsManager), accounting (EditEntryDialog, MatchPayPalDialog, KiSuggestDialog, ManualEntryDialog), settings (UserTable, AuditLogView, UserManagementTab, PasswordResetDialog), admin-bulk-actions, tenant, workflow (ApprovalDialog, TaskDialog), partners (PartnerDialog, ContractDialog), donors (DonorDialog), documents, social, inventory, logistics, projects, funding-agent, dashboard (KpiCard u. a.)

---

*Hinweis: Dieser Bericht ist rein faktenbasiert aus dem Code erstellt (keine Laufzeit-Tests). Die P1-Einschätzungen zu Überläufen (projekte/overview) basieren auf Klassenanalyse bei 360 px (verfügbare Breite = Viewport − px-3/px-4-Padding − Card-Padding); eine Verifikation im Browser/DevTools-Emulator wird empfohlen.*
