Kevin Adametz
6a4c4d8837
Das System ist seit 20.07.2026 live; die dev-Doku spiegelt jetzt den Betriebszustand statt der Release-Vorbereitung: - dev/betrieb/: Deploy-Runbook (neu: §10 Betrieb nach Go-Live mit SFTP-Deploy-Checkliste inkl. queue:restart-Pflicht und den Betriebs-Erkenntnissen der Go-Live-Woche), Legacy-API-Parität, Umami. - dev/roadmap.md: offene Nachlauf-Punkte (Go-Live-Mails, Merge nach main, Stripe-Test-Artefakte, Key-Rotation, Alt-System-Abschaltung) und Ideen-Backlog. - dev/archive/: abgeschlossene Phasen — Migration-2026-Planung, Cutover-Runbook (mit Erledigt-Vermerk), Release-Plan/QA-Checkliste, Optimierungsphasen, Frontend-Konzepte + Responsive-Audits vom 16.07., Altsystem-Reste. - dev/README.md als Wegweiser; gitignore-Pfad der SQL-Dumps mitgezogen (dev/archive/migration-2026/sql/ bleibt untracked, ebenso dev/migration/ und dev/api/). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
240 lines
14 KiB
Markdown
240 lines
14 KiB
Markdown
# Protokoll & Bestandsaufnahme: Frontend Responsive / Mobile (Re-Audit)
|
||
|
||
> **Erstellt:** 16.07.2026 (dritte Session)
|
||
> **Status:** Audit + **P1-Fixes umgesetzt** (16.07.2026)
|
||
> **Viewports:** 320×568 (iPhone SE) und 390×844 (iPhone 14/15), `mobile: true`
|
||
> **Scope:** Öffentliches Web-Frontend (presseecho, businessportal24, pressekonto-Hub)
|
||
> **Nicht im Scope:** Admin/Portal (Flux), Auth, Customer-Bereich
|
||
> **Grundlage:** Code-Review (aktueller Stand) + Live-CDP-Messung im Browser
|
||
|
||
---
|
||
|
||
## Zweck dieses Dokuments
|
||
|
||
Frische Bestandsaufnahme **nach** den bereits umgesetzten Fixes aus
|
||
`dev/frontend-optimize-grok.md`. Dieses Protokoll
|
||
|
||
1. **verifiziert**, welche früheren P0/P1-Befunde jetzt tatsächlich behoben sind (Code + Live),
|
||
2. **listet die noch offenen Punkte** (v. a. aus `dev/frontend-optimize-56.md`), und
|
||
3. **dokumentiert einen neuen, bisher nicht erfassten Fehler** bei 320px.
|
||
|
||
**Es wurde bewusst noch kein Code geändert.**
|
||
|
||
---
|
||
|
||
## Kurzfazit
|
||
|
||
Die schweren strukturellen P0-Bugs aus den beiden Vor-Audits sind im aktuellen Code
|
||
**behoben und live bestätigt** (bei 390px kein Seiten-Overflow mehr, Hero-Hierarchie intakt,
|
||
Hub mit Mobile-Nav/Burger, Footer stackt, Architektur-Diagramm gestapelt).
|
||
|
||
Offen bleiben:
|
||
|
||
| Priorität | Thema | Betrifft | Quelle |
|
||
|-----------|-------|----------|--------|
|
||
| **P1** | **Sticky-Header funktional wirkungslos** – Script schaltet Klassen `header-normal`/`header-sticky` um, für die **keine CSS-Regeln existieren** | Portal-Seiten (presseecho, businessportal24) | 56.md P1-04, hier **live bestätigt** |
|
||
| **P1 (neu)** | **Header-Button-Gruppe bricht bei 320px aus** → horizontaler Seiten-Scroll auf sehr kleinen Phones | Portal-Home (+38px) & Hub (+62px) | **Neu in diesem Audit** |
|
||
| P2 | Industry-Index: `grid-cols-2` + `px-5` ab Mobile (gequetscht) | Portal-Homes | 56.md P2-01 |
|
||
| P2 | Touch-Targets in Portal-Topbar unter 44×44 (DE/EN, „Preise") | Portale | 56.md P2-03 |
|
||
| P2 | Stat-Strips `grid-cols-2` mit großen Zahlen, Labels wrappen | Kategorie/Newsroom/Veröffentlichen | 56.md P2-02 |
|
||
| P2 | FAQ-Antworten `pl-[60px]`, Credit-Pakete 2-spaltig, kleine Pagination/Modal-Close-Buttons, FAQ/API fehlen in mobiler Portal-Nav | Veröffentlichen/Preise/diverse | 56.md P2-07 |
|
||
| P3 | API-Tabellen `overflow-x-auto` (bewusst, kein Seiten-Overflow) | API-Seite | 56.md P2-05 |
|
||
|
||
---
|
||
|
||
## Methode
|
||
|
||
1. **Code-Review** der High-Leverage-Blades unter `resources/views/web/**` und
|
||
`resources/views/components/web/**`.
|
||
2. **Live-Check** im Browser mit CDP-Emulation (`Emulation.setDeviceMetricsOverride`) bei
|
||
320px und 390px; Messung von `document.documentElement.scrollWidth`,
|
||
Element-Bounding-Boxes und `getComputedStyle`.
|
||
3. **Overflow-Isolation:** Elemente mit `right > clientWidth` gefiltert und um solche
|
||
bereinigt, die einen klippenden Vorfahren (`overflow-x: hidden/clip/auto/scroll`) haben,
|
||
sowie um die lokale Laravel-Debugbar.
|
||
|
||
**Hinweis Debugbar:** Lokal sichtbar, wurde bei allen Messungen ausgeschlossen (kein Produktionsproblem).
|
||
|
||
---
|
||
|
||
## Teil A — Verifiziert behoben (aus grok.md)
|
||
|
||
| Befund | Datei(en) | Beleg (Code + Live) |
|
||
|--------|-----------|---------------------|
|
||
| **P0-01** Focus-Hero-Overlay überdeckt „Im Fokus" | `components/web/focus-hero.blade.php` | Overlay jetzt im Flow: `min-h-[320px] sm:min-h-[420px] lg:min-h-[500px] flex flex-col justify-end`, Type `text-[24px] sm:text-[32px] lg:text-[38px]`. **Live 390px:** `h1Top=407 > imFokusBottom=250` → Hierarchie intakt. |
|
||
| **P0-03** Quality-Summary erzeugt H-Scroll | `components/web/quality-summary.blade.php` | Grid jetzt `grid-cols-1 sm:grid-cols-[auto_minmax(0,1fr)_auto]`, Link `sm:whitespace-nowrap`, Padding `px-4 sm:px-6 lg:px-8`. **Live 390px Portal-Home:** `scrollWidth = 390` (kein Overflow). |
|
||
| **P0-02** Kategorie-/Newsroom-Hero gleicher Overlay-Overflow | `web/kategorie.blade.php`, `web/newsroom.blade.php` | Beide Heroes jetzt `min-h-[…] flex flex-col justify-end` statt fester Höhe / Aspect-Ratio. |
|
||
| **P0-04** Hub-Utility-Bar + Header sprengen Viewport | `components/web/hub/top-utility-bar.blade.php`, `hub/site-header.blade.php` | Utility-Bar `flex-wrap`, kurzes Datum (`sm:hidden`), Mobile-**Burger + Panel** (`x-data menuOpen`). **Live 390px Hub:** `scrollWidth = 390`. |
|
||
| **P1-01** Hub-Footer 4 Spalten auf Mobile | `components/web/hub/site-footer.blade.php` | Jetzt `grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr_1fr]`. |
|
||
| **P1-02** Hub-Architektur-Diagramm überlappt | `web/pressekonto.blade.php` | Mobile-Variante gestapelt (`lg:hidden flex flex-col`), absolut positioniertes Diagramm nur noch `hidden lg:block`. |
|
||
| **P1-03** Hartes `px-8` auf Homepages | `focus-hero`, `quality-summary`, `industry-index` u. a. | Umgestellt auf `px-4 sm:px-6 lg:px-8`. |
|
||
|
||
---
|
||
|
||
## Teil B — Noch offene Befunde
|
||
|
||
### P1-04 — Sticky-Header ist funktional wirkungslos (live bestätigt)
|
||
|
||
**Schwere:** Hoch
|
||
**Wo:**
|
||
- `resources/views/web/layouts/web-master.blade.php` (Inline-Script ~76–115)
|
||
- `resources/views/components/web/site-header.blade.php` (`id="topbar"` Z. 54, `id="header" class="header-normal …"` Z. 101)
|
||
|
||
**Problem:** Beim Scrollen tauscht das Script `header-normal` ↔ `header-sticky`. Für diese
|
||
beiden Klassen existieren **keine CSS-Regeln** – bestätigt per Repo-Suche: Treffer nur in
|
||
Blade/JS sowie in `dev/_old/`-Altbuilds, **nicht** in den aktiven Web-CSS-Quellen/Builds.
|
||
|
||
**Live-Messung (390px, businessportal24, nach `scrollTo(0, 700)`):**
|
||
- `header.className = "header-normal …"` (Klasse wechselt nicht wirksam)
|
||
- `getComputedStyle(header).position = "static"`
|
||
- Header-`top = -665` → **Header komplett aus dem Viewport gescrollt, nicht sichtbar**
|
||
|
||
**Auswirkung:** Auf langen Mobilseiten verschwinden Suche, Anmelden und der
|
||
Veröffentlichungs-CTA beim Scrollen. Der gewünschte Sticky-Effekt tritt nie ein.
|
||
|
||
**Fix-Richtung (später):** Entweder CSS für `.header-sticky` (`position: sticky/fixed`,
|
||
Top-Offset, Schatten, Platzhalterhöhe) ergänzen, oder das Script entfernen und stattdessen
|
||
`position: sticky; top: 0` direkt am Header-Container setzen.
|
||
|
||
---
|
||
|
||
### P1-05 (NEU) — Header-Button-Gruppe bricht bei 320px aus → H-Scroll
|
||
|
||
**Schwere:** Hoch (nur ≤ 320px; bei 390px sauber)
|
||
**Status:** In den Vor-Audits **nicht** erfasst (dort wurde vor dem Fix 635/457px gemessen).
|
||
|
||
**Live-Messung 320px:**
|
||
|
||
| Seite | `scrollWidth` | Overflow | Verursacher (kein klippender Vorfahre) |
|
||
|-------|---------------|----------|-----------------------------------------|
|
||
| Portal-Home (businessportal24) | 358 | **+38px** | Header-rechts-Cluster `flex items-center gap-1 sm:gap-2 flex-shrink-0` (`right=358`), darin PM-Button |
|
||
| Hub (pressekonto) | 382 | **+62px** | Header-rechts-Cluster `flex items-center gap-1.5 sm:gap-2 flex-shrink-0` (`right=383`), „Registrieren"-Button + Burger |
|
||
|
||
**Ursache:**
|
||
- **Portal** (`components/web/site-header.blade.php` ~144–182): Logo + Such-Icon (40px) +
|
||
„Anmelden" + PM-Button liegen alle in einer nicht umbrechenden Zeile; `flex-shrink-0`
|
||
verhindert Schrumpfen. Bei 320px reicht die Breite nicht.
|
||
- **Hub** (`components/web/hub/site-header.blade.php` ~48–91): Logo + „Anmelden" +
|
||
„Registrieren" + 40px-Burger. Der zusätzliche „Registrieren"-Button (`sm:hidden`) neben
|
||
Burger und „Anmelden" ist bei 320px zu breit.
|
||
|
||
**Fix-Richtung (später):** Bei ≤ 320px Buttons weiter verkürzen (Icon-only bzw. „Registrieren"
|
||
in den Burger verlagern), engere Gaps, `min-w-0`/kürzere Labels; Ziel
|
||
`scrollWidth <= clientWidth` auch bei 320px.
|
||
|
||
---
|
||
|
||
### P2-01 — Industry-Index: 2 Spalten + `px-5` ab Mobile
|
||
|
||
**Schwere:** Mittel
|
||
**Wo:** `components/web/industry-index.blade.php` (`grid-cols-2 md:grid-cols-4`, Kacheln `px-5`)
|
||
Lange Branchennamen + Delta in einer Zeile wirken bei 320/390px gequetscht. Kein Seiten-Overflow.
|
||
|
||
### P2-02 — Stat-Strips / Sidebar-Grids (Dichte)
|
||
|
||
**Schwere:** Mittel
|
||
Kategorie/Newsroom Stat-Strips `grid-cols-2` mit `text-[32px]`-Zahlen → Labels wrappen unschön.
|
||
`focus-side-item` als 3-Spalten-Grid in gestapelter Sidebar funktional ok, aber dicht.
|
||
Release-Detail-Hero `aspect-ratio: 21/9` → mobil sehr flach (~153px Bildhöhe).
|
||
|
||
### P2-03 — Touch-Targets Portal-Topbar
|
||
|
||
**Schwere:** Mittel
|
||
DE/EN-Umschalter und „Preise"-Link in der Topbar bleiben unter der 44×44-Empfehlung.
|
||
Suche/Anmelden mit ~40×40 grenzwertig; die große Rubrik-Zeile (Burger) erreicht ~358×44.
|
||
|
||
### P2-04 — Brand-Kontextbanner (Hub, `?from=…`)
|
||
|
||
**Schwere:** Niedrig – **weitgehend entschärft**
|
||
`components/web/hub/brand-context-banner.blade.php` hat jetzt `flex-wrap`.
|
||
**Live 320px (`?from=businessportal24`):** „Zurück zu"-Link `right = 304` (< 320) → kein Overflow.
|
||
Der `flex-1`-Spacer ohne `min-w-0` am Text ist ein kleines Restrisiko bei extrem langen Marken – niedrig.
|
||
|
||
### P2-05 — API-Seite Tabellen (bewusst)
|
||
|
||
`overflow-x-auto` + `whitespace-nowrap` → Scrollen innerhalb der Tabelle, nicht der Seite. Kein Handlungsbedarf.
|
||
|
||
### P2-06 — Weitere Dichte-/Touch-Themen (aus 56.md P2-07)
|
||
|
||
- FAQ-Antworten „Veröffentlichen" mit `pl-[60px]` verschenken auf 320px Textbreite.
|
||
- Credit-Pakete auf „Preise" starten bereits mobil zweispaltig.
|
||
- Pagination und mehrere Modal-Close-Buttons ~32–36px (< 44×44).
|
||
- FAQ/API sind in der **mobilen Portal-Kopf-Navigation** nicht direkt erreichbar (nur `hidden lg:inline` in der Topbar bzw. über den Footer). Der Mobile-Burger listet nur Rubriken.
|
||
|
||
---
|
||
|
||
## Live-Messmatrix (dieses Audit)
|
||
|
||
| Seite | Viewport | `scrollWidth` | clientWidth | Overflow | Bewertung |
|
||
|-------|----------|---------------|-------------|----------|-----------|
|
||
| Portal-Home (businessportal24) | 390 | 390 | 390 | 0 | ok |
|
||
| Portal-Home (businessportal24) | 320 | 358 | 320 | **+38** | Header-Cluster (P1-05) |
|
||
| Hub (pressekonto, `?from=…`) | 390 | 390 | 390 | 0 | ok |
|
||
| Hub (pressekonto, `?from=…`) | 320 | 382 | 320 | **+62** | Header-Cluster (P1-05) |
|
||
| Sticky-Header (Portal, Scroll 700) | 390 | – | – | – | `position: static`, scrollt weg (P1-04) |
|
||
|
||
---
|
||
|
||
## Empfohlene Bearbeitungsreihenfolge (noch nicht umsetzen)
|
||
|
||
1. **P1-04** – Sticky-Header: CSS herstellen oder auf `position: sticky` am Container umstellen.
|
||
2. **P1-05 (neu)** – Header-Button-Cluster bei ≤ 320px entschärfen (Portal + Hub).
|
||
3. **P2** – Industry-Index-Dichte, Stat-Strips, Touch-Targets, FAQ-Padding, Credit-Pakete, mobile Nav-Erreichbarkeit von FAQ/API.
|
||
|
||
**Akzeptanzkriterium je Fix:** `document.documentElement.scrollWidth <= clientWidth` bei
|
||
320/390/430px, plus visuelle Prüfung Portal-Home + Hub + eine Kategorie + eine PM-Detailseite.
|
||
|
||
---
|
||
|
||
## Dateien mit höchster Hebelwirkung (offen)
|
||
|
||
1. `resources/views/web/layouts/web-master.blade.php` + Web-CSS (Sticky-Header, P1-04)
|
||
2. `resources/views/components/web/site-header.blade.php` (Portal-Header 320px, P1-05)
|
||
3. `resources/views/components/web/hub/site-header.blade.php` (Hub-Header 320px, P1-05)
|
||
4. `resources/views/components/web/industry-index.blade.php` (P2-01)
|
||
5. Preise-/Veröffentlichen-Views (P2-06: Credit-Pakete, FAQ-Padding)
|
||
|
||
---
|
||
|
||
## Umsetzung (16.07.2026)
|
||
|
||
Die beiden P1-Punkte sind umgesetzt und live (320/390px) verifiziert.
|
||
|
||
| Check | Vorher | Nachher |
|
||
|-------|--------|---------|
|
||
| Sticky-Header Portal (nach Scroll) | `position: static`, scrollt weg | `position: fixed; top:0; z-index:50`, sichtbar; Platzhalter verhindert Sprung; setzt oben sauber zurück |
|
||
| Portal-Home `scrollWidth` @320px | 358 (+38) | **320** (0) |
|
||
| Hub `scrollWidth` @320px | 382 (+62) | **320** (0) |
|
||
| presseecho-Home `scrollWidth` @320/390 | – | **320 / 390** (0) |
|
||
| Hub/Portal `scrollWidth` @390px | 390 | 390 (unverändert ok) |
|
||
|
||
**Geänderte Dateien:**
|
||
- `resources/css/web/shared-styles.css` — CSS-Regeln für `.header-sticky` ergänzt (P1-04).
|
||
- `resources/views/web/layouts/web-master.blade.php` — Sticky-Script mit Platzhalter (kein Layout-Sprung) (P1-04).
|
||
- `resources/views/components/web/site-header.blade.php` — Portal-Header bei ≤320px verschlankt (Padding/Gap/Logo/CTA) (P1-05).
|
||
- `resources/views/components/web/hub/site-header.blade.php` — Hub-Header verschlankt; „Anmelden" auf Mobile ins Burger-Panel verlagert (P1-05).
|
||
- `resources/views/web/pressekonto.blade.php` — Hub-Hero-H1 Basisgröße `text-[34px]` (Wortmarke „businessportal24" passte bei 320px nicht) (P1-05).
|
||
|
||
**Tests:** `PresseechoHomeTest`, `Businessportal24HomeTest`, `PressekontoHubHomeTest`, `HubStaticPageShellTest` — 32 passed. Pint sauber.
|
||
|
||
**Hinweis:** Web-Assets wurden neu gebaut (`npm run build:web`). Sail/Docker war nicht aktiv; Build lief direkt über npm.
|
||
|
||
## Umsetzung P2 (16.07.2026)
|
||
|
||
| Punkt | Änderung | Datei |
|
||
|-------|----------|-------|
|
||
| P2 Nav | FAQ, API und Preise ins Mobile-Burger-Menü aufgenommen (vorher mobil nur im Footer) | `components/web/site-header.blade.php` |
|
||
| P2-03 | Edition-Tabs (DE/EN) in der Topbar: `py-2 → py-2.5`, `px-1.5 → px-2` (größere Tap-Fläche) | `components/web/site-header.blade.php` |
|
||
| P2-01 | Industry-Index: `px-5 → px-4 sm:px-5`, `py-[18px] → py-4 sm:py-[18px]`, Branchenname `text-[13px] sm:text-[14px]` | `components/web/industry-index.blade.php` |
|
||
| P2-07 | „Veröffentlichen"-FAQ-Antwort: `pl-[60px] → pl-0 sm:pl-[60px]` (volle Textbreite auf Mobile) | `web/veroeffentlichen.blade.php` |
|
||
| P2 (neu) | Preise „Einzel-PM"-Block: `gap-6` → `flex-wrap gap-4` (behebt 11px-Overflow bei 320px) | `web/preise.blade.php` |
|
||
|
||
**Live-Verifikation @320px:** Preise `scrollWidth` 331 → **320**; Veröffentlichen ohne echten Layout-Overflow (verbleibende 6px = Debugbar); Mobile-Burger enthält jetzt Preise/FAQ/API.
|
||
|
||
**Tests:** 105 passed (u. a. Home-, Hub-, Preise-, Publish-Suites). Pint sauber. Web-Assets neu gebaut.
|
||
|
||
**Bewusst belassen:** Credit-Pakete (`grid-cols-2`) — kompakte Kacheln, bei 320px kein Overflow. Pagination-Buttons (~36px) als optionaler Feinschliff offen.
|
||
|
||
---
|
||
|
||
*Ende des Protokolls. P1 + P2 umgesetzt und verifiziert.*
|