Bug: Projektansicht — zu viel Padding oben + Cards zu breit für Mobile (horizontaler Scroll) #36

Open
opened 2026-05-09 17:23:23 +00:00 by mAi · 0 comments
Collaborator

Bug (m, PWA-Voice 2026-05-09 19:22)

"Die Paliad-Projektansicht ist immer noch nicht in Ordnung. Es gibt zu viel Platz oben, jedenfalls auf der Web-App. Außerdem sind die Karten weiterhin viel zu breit für die Mobilansicht. Sie führen zu horizontalem Scrolling, das möchte ich nicht."

m's "weiterhin" + "immer noch" — das ist nicht das erste Mal. Ist nicht gefixt geblieben oder Regression.

Two issues

1. Zu viel Platz oben auf der Projektansicht (Web-App)

Header / oberer Padding-Bereich verschwendet vertikalen Platz. Auf Mobile besonders schmerzhaft, weil dadurch die Cards weiter unten sind als nötig.

Fix-Shape:

  • Audit den Header der Projektansicht: padding-top / margin-top, evtl. ein <h1> mit mt-8 o.ä.
  • Konkrete Werte messen + halbieren als Startpunkt
  • Falls's ein Top-Padding der Page-Wrapper ist (kein Hero-Element), pt-2 statt pt-8 (Tailwind-Pattern)

2. Cards zu breit für Mobile, horizontales Scrolling

Cards in der Projektansicht überlaufen die Viewport-Breite auf Mobile → horizontales Scrolling. m will das nicht.

Fix-Shape:

  • Card-Container: max-width: 100% + box-sizing: border-box so dass Padding nicht overflow erzeugt
  • Card-Content: keine min-width-Werte die größer als der Viewport sind
  • Lange Strings (Case-Names, Akten-Numbers): overflow-wrap: break-word / word-break: break-word
  • Tabellen / Grids: auf Mobile vertikal stapeln statt horizontal scrollen
  • Kein width: 600px o.ä. Hard-coded — alles relativ + min(100%, Xpx)

Plus: das Symptom ist der gleiche Pattern wie yoUPC/youpc.org#130 (Feed-Cards zu breit für PWA, gefiled heute 17:52). Wahrscheinlich gibt's einen geteilten CSS-Antipattern oder eine geteilte Component-Library-Annahme über Min-Width — beim Fixen hier mitprüfen, ob's youpc auch betrifft.

Acceptance criteria

  1. Projektansicht auf Desktop: Header nicht "luftig-leer" wirken.
  2. Projektansicht auf Mobile (iOS Safari + Android Chrome): kein horizontales Scrolling, Cards passen in den Viewport, Inhalte umbrechen wo nötig.
  3. Lange Texte (lange Case-Namen, lange Aktenzeichen) brechen sauber statt overflow.
  4. Regression-Test idealerweise mit einer fixed-Width-Mobile-Viewport-Probe (375 px Breite) im CI.

Out of scope

  • Andere Paliad-Views (Custom Views, Editor, Dashboard) — nur die Projektansicht in diesem Issue. Wenn das gleiche Pattern dort auftaucht, separates Issue oder erweitern hier nach m's Call.
  • yoUPC/youpc.org#130 — gleicher Card-Width-Pattern in der youpc-Feed-Card. Beim Fix prüfen ob die Root-Cause geteilt ist.
  • m/paliad#30 — Mobile-Keyboard-Bug (Header verschwindet beim Tippen). Gleiches Mobile-UX-Cluster. Nicht der gleiche Bug, aber gleicher Bereich der Code-Base.

Refs

  • m's voice via PWA 2026-05-09 19:22
  • m/paliad — Repo
  • m/mWeb#5 — meta-issue zu Web-Conventions; Mobile-Card-Width gehört langfristig in die Convention-Doku
## Bug (m, PWA-Voice 2026-05-09 19:22) > "Die Paliad-Projektansicht ist immer noch nicht in Ordnung. Es gibt zu viel Platz oben, jedenfalls auf der Web-App. Außerdem sind die Karten weiterhin viel zu breit für die Mobilansicht. Sie führen zu horizontalem Scrolling, das möchte ich nicht." m's "weiterhin" + "immer noch" — das ist nicht das erste Mal. Ist nicht gefixt geblieben oder Regression. ## Two issues ### 1. Zu viel Platz oben auf der Projektansicht (Web-App) Header / oberer Padding-Bereich verschwendet vertikalen Platz. Auf Mobile besonders schmerzhaft, weil dadurch die Cards weiter unten sind als nötig. **Fix-Shape**: - Audit den Header der Projektansicht: `padding-top` / `margin-top`, evtl. ein `<h1>` mit `mt-8` o.ä. - Konkrete Werte messen + halbieren als Startpunkt - Falls's ein Top-Padding der Page-Wrapper ist (kein Hero-Element), `pt-2` statt `pt-8` (Tailwind-Pattern) ### 2. Cards zu breit für Mobile, horizontales Scrolling Cards in der Projektansicht überlaufen die Viewport-Breite auf Mobile → horizontales Scrolling. m will das nicht. **Fix-Shape**: - Card-Container: `max-width: 100%` + `box-sizing: border-box` so dass Padding nicht overflow erzeugt - Card-Content: keine `min-width`-Werte die größer als der Viewport sind - Lange Strings (Case-Names, Akten-Numbers): `overflow-wrap: break-word` / `word-break: break-word` - Tabellen / Grids: auf Mobile vertikal stapeln statt horizontal scrollen - Kein `width: 600px` o.ä. Hard-coded — alles relativ + `min(100%, Xpx)` Plus: das Symptom ist der gleiche Pattern wie **yoUPC/youpc.org#130** (Feed-Cards zu breit für PWA, gefiled heute 17:52). Wahrscheinlich gibt's einen geteilten CSS-Antipattern oder eine geteilte Component-Library-Annahme über Min-Width — beim Fixen hier mitprüfen, ob's youpc auch betrifft. ## Acceptance criteria 1. Projektansicht auf Desktop: Header nicht "luftig-leer" wirken. 2. Projektansicht auf Mobile (iOS Safari + Android Chrome): kein horizontales Scrolling, Cards passen in den Viewport, Inhalte umbrechen wo nötig. 3. Lange Texte (lange Case-Namen, lange Aktenzeichen) brechen sauber statt overflow. 4. Regression-Test idealerweise mit einer fixed-Width-Mobile-Viewport-Probe (375 px Breite) im CI. ## Out of scope - Andere Paliad-Views (Custom Views, Editor, Dashboard) — nur die Projektansicht in diesem Issue. Wenn das gleiche Pattern dort auftaucht, separates Issue oder erweitern hier nach m's Call. ## Cross-link - yoUPC/youpc.org#130 — gleicher Card-Width-Pattern in der youpc-Feed-Card. Beim Fix prüfen ob die Root-Cause geteilt ist. - m/paliad#30 — Mobile-Keyboard-Bug (Header verschwindet beim Tippen). Gleiches Mobile-UX-Cluster. Nicht der gleiche Bug, aber gleicher Bereich der Code-Base. ## Refs - m's voice via PWA 2026-05-09 19:22 - m/paliad — Repo - m/mWeb#5 — meta-issue zu Web-Conventions; Mobile-Card-Width gehört langfristig in die Convention-Doku
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/paliad#36
No description provided.