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>
264 lines
11 KiB
Markdown
264 lines
11 KiB
Markdown
# Bestandsaufnahme: Frontend Responsive / Mobile
|
||
|
||
> **Erstellt:** 16.07.2026
|
||
> **Status:** Audit + **P0/P1-Fixes umgesetzt** (16.07.2026, zweite Session)
|
||
> **Viewport:** 390×844 (iPhone-ähnlich), `mobile: true`
|
||
> **Scope:** Öffentliches Web-Frontend (presseecho, businessportal24, pressekonto-Hub)
|
||
> **Nicht im Scope:** Admin/Portal (Flux), Customer-Bereich
|
||
|
||
---
|
||
|
||
## Methode
|
||
|
||
1. Live-Check im Browser (CDP-Layout-Metriken: `scrollWidth`, Overlay-Bounding-Boxes, Grid-Spalten, Touch-Targets)
|
||
2. Code-Review der Blade-Komponenten unter `resources/views/web/**` und `resources/views/components/web/**`
|
||
3. Stichproben: Startseiten beider Portale, Preise, Release-Detail, Kategorie, Veröffentlichen, Hub-Landing
|
||
|
||
**Hinweis zu Screenshots:** Das Browser-Capture zeigt die emulierte Seite oft als schmalen Streifen links im Fenster (Tooling-Artefakt). Maßgeblich sind die CDP-Messungen (`clientWidth` / `scrollWidth` / Element-Rechtecke), nicht die leere Fläche rechts im Screenshot.
|
||
|
||
**Hinweis Debugbar:** Laravel Debugbar ist lokal sichtbar und verdeckt Inhalt – kein Produktionsproblem, bei visueller QA ausblenden.
|
||
|
||
---
|
||
|
||
## Kurzfazit
|
||
|
||
Die Desktop-Layouts sind weitgehend stimmig. Auf Mobile gibt es **wenige, aber schwere strukturelle Bugs**, die sich themenübergreifend wiederholen:
|
||
|
||
| Priorität | Thema | Betrifft |
|
||
|-----------|--------|----------|
|
||
| P0 | Hero-Text-Overlay läuft aus dem Bild nach oben und überdeckt Section-Header | Portal-Startseiten, Kategorie (und analog Newsroom) |
|
||
| P0 | Horizontaler Seiten-Scroll durch Quality-Summary (3-Spalten-Grid + `nowrap`-Link) | Portal-Startseiten |
|
||
| P0 | Hub-Utility-Bar + Header-CTAs sprengen die Viewport-Breite (~245px Overflow) | pressekonto.test |
|
||
| P1 | Hub-Footer fest 4 Spalten; Architektur-Diagramm mit überlappenden Karten | pressekonto.test |
|
||
| P1 | Hub-Navigation ab `lg` ausgeblendet **ohne** Mobile-Menü-Ersatz | pressekonto.test |
|
||
| P2 | Hartes `px-8` / große Type auf Homepages; kleine Touch-Targets in Topbar | Portale |
|
||
|
||
Seiten wie **Preise**, **Release-Detail** und **Veröffentlichen** sind mobil schon deutlich robuster (`px-4 sm:px-6 lg:px-8`, kein Seiten-Overflow in der Stichprobe).
|
||
|
||
---
|
||
|
||
## Geprüfte Seiten (Überblick)
|
||
|
||
| Seite | URL (Beispiel) | Mobil-Status |
|
||
|-------|----------------|--------------|
|
||
| Startseite presseecho | `https://presseecho.test/de` | Kritisch: Hero-Overlap + H-Scroll |
|
||
| Startseite businessportal24 | `https://businessportal24.test/de` | Kritisch: gleiches Muster |
|
||
| Hub pressekonto | `https://pressekonto.test/` | Kritisch: Utility/Header/Footer/Diagramm |
|
||
| Preise | `…/de/preise` | Weitgehend ok |
|
||
| Release-Detail | `…/de/press-release/…` | Weitgehend ok; Hero-Bild sehr flach (21:9) |
|
||
| Kategorie | `…/de/category/sonstiges` | Kritisch: Hero-Overlay-Overflow |
|
||
| Veröffentlichen | `…/de/veroeffentlichen` | Weitgehend ok |
|
||
| Suche / FAQ / API / Newsrooms | Code-Review + Muster | Keine P0 in Stichprobe; API-Tabellen bewusst `overflow-x-auto` |
|
||
|
||
---
|
||
|
||
## Befunde im Detail
|
||
|
||
### P0-01 — Focus-Hero: Overlay überdeckt „Im Fokus“
|
||
|
||
**Schwere:** Kritisch
|
||
**Wo:** `resources/views/components/web/focus-hero.blade.php` (Zeilen ~39–67)
|
||
**Portale:** presseecho + businessportal24 (gleiche Komponente)
|
||
|
||
**Messung (390px, Lead mit langem Titel/Teaser):**
|
||
- Parent-Bildbox: `h-[500px]` → Höhe 500px
|
||
- Absolutes Bottom-Overlay: Höhe **734px** (presseecho) bzw. **586px** (businessportal24)
|
||
- Overlay ragt **~234px nach oben** aus dem Container und liegt über dem Section-Header („Im Fokus“ + Datum)
|
||
|
||
**Ursache:**
|
||
- Feste Höhe `h-[500px]` + `overflow-hidden` am Bild
|
||
- Overlay absolut `bottom-0` mit Headline `text-[38px]` (ohne Mobile-Downscale), Teaser und Meta
|
||
- Inhalt des Overlays ist höher als die Bildbox → wächst nach oben aus dem `relative`-Wrapper (Parent der `<a>` hat kein `overflow:hidden`)
|
||
|
||
**Darstellung:** Titel/Teaser überdecken die Überschrift „Im Fokus“; Lesbarkeit und Hierarchie kaputt.
|
||
|
||
**Fix-Richtung (später):** Responsive Type (`text-[24px] sm:text-[32px] lg:text-[38px]`), Overlay-Padding `px-4 sm:px-9`, ggf. `min-h` statt fester Höhe oder Overlay in den Flow legen / `overflow-hidden` am äußeren `relative`.
|
||
|
||
---
|
||
|
||
### P0-02 — Kategorie-/Newsroom-Hero: gleiches Overlay-Problem
|
||
|
||
**Schwere:** Kritisch (Kategorie verifiziert) / Hoch (Newsroom analog im Code)
|
||
**Wo:**
|
||
- `resources/views/web/kategorie.blade.php` ~123–147 (`aspect-ratio: 16/10`)
|
||
- `resources/views/web/newsroom.blade.php` ~152–180 (`aspect-ratio: 16/9`)
|
||
|
||
**Messung Kategorie (390px):**
|
||
- Hero-Box ~224×358
|
||
- Overlay-Höhe **459px**, `topDelta` ca. **−236px** (ragt nach oben heraus)
|
||
|
||
Trotz etwas kleinerer Type (`text-[26px] sm:text-[32px]`) reicht langer Titel + Teaser + Meta, um das flache Aspect-Ratio-Hero zu sprengen.
|
||
|
||
---
|
||
|
||
### P0-03 — Horizontaler Scroll auf Portal-Startseiten (Quality-Summary)
|
||
|
||
**Schwere:** Kritisch
|
||
**Wo:** `resources/views/components/web/quality-summary.blade.php`
|
||
**Messung:** `scrollWidth = 457` bei `vw = 390` (Δ ≈ **67px**) auf beiden Portal-Homes
|
||
|
||
**Isolation:** Ausblenden der Quality-Summary-Section → `scrollWidth = 390`. Andere Home-Sections allein verursachen den Overflow nicht.
|
||
|
||
**Ursache:**
|
||
```html
|
||
style="grid-template-columns: auto 1fr auto;"
|
||
```
|
||
bleibt auf Mobile **3 Spalten**. Der Link „Veröffentlichungsrichtlinien →“ hat `whitespace-nowrap` und endet bei `right ≈ 458` (> 390).
|
||
|
||
**Fix-Richtung:** Grid auf Mobile stacken (`grid-cols-1 sm:grid-cols-[auto_1fr_auto]` o. ä.), Link umbrechen lassen oder unter den Text legen; Section-Padding auf `px-4 sm:px-6 lg:px-8`.
|
||
|
||
---
|
||
|
||
### P0-04 — Hub pressekonto: massiver Horizontal-Scroll
|
||
|
||
**Schwere:** Kritisch
|
||
**Wo:**
|
||
- `resources/views/components/web/hub/top-utility-bar.blade.php`
|
||
- `resources/views/components/web/hub/site-header.blade.php`
|
||
|
||
**Messung (390px):**
|
||
- `scrollWidth = 635` (Δ ≈ **245px**)
|
||
- Utility-Bar-Kinder summiert bis `right = 635` (Datum + „Publisher-Hub für …“ + FAQ/Hilfe/Kontakt, alles `whitespace-nowrap`, kein Wrap/`overflow-x`)
|
||
- Header-CTA-Gruppe („Anmelden“ + „Konto erstellen“) `right = 472`
|
||
|
||
**Zusätzlich:** Haupt-Nav ist `hidden lg:flex` – auf Mobile **komplett weg, ohne Hamburger/Drawer**. Anker (Tarife, Funktion, …) sind im Header nicht erreichbar.
|
||
|
||
---
|
||
|
||
### P1-01 — Hub-Footer: 4 Spalten auf Mobile
|
||
|
||
**Schwere:** Hoch
|
||
**Wo:** `resources/views/components/web/hub/site-footer.blade.php` Zeile ~14
|
||
`style="grid-template-columns:1.5fr 1fr 1fr 1fr;"` ohne Media Query
|
||
|
||
**Messung:** Spaltenbreiten ca. 133 / 63 / 84 / 151 px – Linklisten unbenutzbar schmal.
|
||
|
||
---
|
||
|
||
### P1-02 — Hub Architektur-Diagramm: Überlappung
|
||
|
||
**Schwere:** Hoch
|
||
**Wo:** `resources/views/web/pressekonto.blade.php` ~105–167
|
||
|
||
**Messung:** Containerbreite ~268px bei `height:320px`; Brand-Karten jeweils `min-w-[160px]` links und rechts oben → Überlappung (~52px). Hub-Kreis und Eck-Labels kollidieren.
|
||
|
||
**Zusätzlich:** Stats darunter `grid-cols-3` in derselben engen Karte.
|
||
|
||
---
|
||
|
||
### P1-03 — Hartes `px-8` auf Homepages (Content-Breite)
|
||
|
||
**Schwere:** Hoch (UX/Dichte), kein Overflow allein
|
||
**Wo u. a.:**
|
||
- `focus-hero.blade.php`, `industry-index`, `industry-spotlight`, `pricing-teaser`
|
||
- `presseecho.blade.php` / `businessportal24.blade.php` Feed-Section
|
||
- Hub-Seiten durchgängig `px-8`
|
||
|
||
Unterseiten (Preise, Detail, Suche, …) nutzen bereits korrekt `px-4 sm:px-6 lg:px-8`.
|
||
|
||
Bei 390px Viewport bleiben mit `px-8` nur ~326px Content – verschärft Hero- und Grid-Probleme.
|
||
|
||
---
|
||
|
||
### P2-01 — Industry-Index: 2 Spalten ab Mobile
|
||
|
||
**Schwere:** Mittel
|
||
**Wo:** `industry-index.blade.php` – `grid-cols-2` + `px-5`
|
||
Lange Branchennamen + Delta in einer Zeile wirken gequetscht.
|
||
|
||
---
|
||
|
||
### P2-02 — Quality-Summary / Stat-Strips / Sidebar-Grids
|
||
|
||
**Schwere:** Mittel
|
||
- Quality-Summary: siehe P0-03
|
||
- Kategorie/Newsrooms/Veröffentlichen: `grid-cols-2` Stat-Strips mit großen Zahlen – Labels wrapen unschön
|
||
- `focus-side-item`: 3-Spalten-Grid in gestapelter Sidebar – funktional ok, aber dicht
|
||
- Release-Detail-Hero `aspect-ratio: 21/9` → auf Mobile nur ~153px Bildhöhe
|
||
|
||
---
|
||
|
||
### P2-03 — Touch-Targets Header (Portale)
|
||
|
||
**Schwere:** Mittel
|
||
Topbar DE/EN (~42×35), „Preise“-Link (~33×17), teils unter 44×44-Empfehlung. Suche/Anmelden sind mit ~40×40 besser, aber Topbar bleibt eng.
|
||
|
||
---
|
||
|
||
### P2-04 — Live-Ticker
|
||
|
||
**Schwere:** Niedrig–Mittel (kein alleiniger H-Scroll-Auslöser in der Isolation)
|
||
Marquee mit `width: max-content` ist beabsichtigt und liegt in `overflow-hidden`.
|
||
Market-Slot (`max-w-[min(92vw,280px)]` + `shrink-0`) kann auf sehr schmalen Screens den Ticker-Bereich stark einengen, wenn Kursdaten aktiv sind – bei der Stichprobe war der Market-Slot oft leer.
|
||
|
||
---
|
||
|
||
### P2-05 — API-Seite Tabellen
|
||
|
||
**Schwere:** Niedrig (bewusst)
|
||
`overflow-x-auto` + `whitespace-nowrap` an Field-Namen → horizontales Scrollen in der Tabelle, nicht der ganzen Seite.
|
||
|
||
---
|
||
|
||
## Was mobil bereits gut wirkt
|
||
|
||
- Portal-`site-header`: Suche als Icon-Modal, verkürzte Topbar, Burger für Rubriken
|
||
- Preise: Tarif-Grid `grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`, kein Seiten-Overflow
|
||
- Release-Detail: Padding-Pattern, Body-Breite ~358px, Share-Buttons in 2 Spalten
|
||
- Veröffentlichen: kein H-Scroll in der Stichprobe; FAQ-Zeilen als 3-Spalten-Grid eher Dichte-Thema
|
||
- Viele Unterseiten schon auf `px-4 sm:px-6 lg:px-8` umgestellt
|
||
|
||
---
|
||
|
||
## Empfohlene Bearbeitungsreihenfolge (noch nicht umsetzen)
|
||
|
||
1. **P0-01 / P0-02** – Hero-Overlays (Focus-Hero, Kategorie, Newsroom): Type + Overflow-Containment
|
||
2. **P0-03** – Quality-Summary responsive machen (behebt Portal-H-Scroll)
|
||
3. **P0-04 / P1-01 / P1-02** – Hub: Utility-Bar, Header (Mobile-Nav!), Footer-Grid, Architektur-Diagramm
|
||
4. **P1-03** – Homepages/Shared: `px-8` → `px-4 sm:px-6 lg:px-8`
|
||
5. **P2** – Industry-Index, Touch-Targets, flaches Detail-Hero, Feinschliff
|
||
|
||
---
|
||
|
||
## Testmatrix für spätere Fixes
|
||
|
||
| Breakpoint | Geräte-Proxy |
|
||
|------------|----------------|
|
||
| 320×568 | iPhone SE |
|
||
| 390×844 | iPhone 14/15 |
|
||
| 430×932 | große Phones |
|
||
| 768×1024 | Tablet |
|
||
|
||
Pro Fix mindestens: beide Portal-Homes + Hub + eine Kategorie + eine PM-Detailseite; `document.documentElement.scrollWidth <= clientWidth`.
|
||
|
||
---
|
||
|
||
## Dateien mit höchster Hebelwirkung
|
||
|
||
1. `resources/views/components/web/focus-hero.blade.php`
|
||
2. `resources/views/components/web/quality-summary.blade.php`
|
||
3. `resources/views/web/kategorie.blade.php` / `newsroom.blade.php` (Hero-Blöcke)
|
||
4. `resources/views/components/web/hub/top-utility-bar.blade.php`
|
||
5. `resources/views/components/web/hub/site-header.blade.php`
|
||
6. `resources/views/components/web/hub/site-footer.blade.php`
|
||
7. `resources/views/web/pressekonto.blade.php` (Architektur-Diagramm + `px-8`)
|
||
|
||
---
|
||
|
||
## Umsetzung (16.07.2026)
|
||
|
||
P0/P1 aus der Reihenfolge oben sind umgesetzt. Verifikation bei 390px:
|
||
|
||
| Check | Vorher | Nachher |
|
||
|-------|--------|---------|
|
||
| Portal-Home `scrollWidth` | 457 | 390 |
|
||
| Hero: H1 unter „Im Fokus“ | Overlay überdeckte Header | Hierarchie ok (`h1Top > h2Bottom`) |
|
||
| Hub `scrollWidth` | 635 | 390 |
|
||
| Hub-Footer-Spalten | 4 | 1 (stackt ab `sm`/`lg`) |
|
||
| Hub Mobile-Nav | fehlte | Burger + Panel |
|
||
|
||
**Geänderte Dateien:** Focus-Hero, Quality-Summary, Kategorie-/Newsroom-Hero, Hub Utility/Header/Footer/Banner, Homepages + Industry-/Pricing-Teaser-Paddings, Architektur-Diagramm (Mobile-Stack).
|
||
|
||
**Tests:** `PresseechoHomeTest`, `Businessportal24HomeTest`, `PressekontoHubHomeTest`, `HubStaticPageShellTest` — 32 passed.
|
||
|
||
**Offen (P2):** kleinere Touch-Targets in Portal-Topbar, Industry-Index-Dichte, flaches Release-Detail-Hero 21:9.
|