fix(ui): Ueberbreite auf dem Handy beseitigen (#038)
Beim Oeffnen der Warnungen und auf der Host-Detailansicht zoomte der Browser die ganze Seite heraus. Ursache war jeweils ein Element breiter als das Fenster: die 22 rem breite Klappliste, drei Tabellen ohne table-responsive und eine 32-stellige Server-ID ohne Umbruch. Klapplisten richten sich auf dem Telefon jetzt am Fenster aus statt am Knopf, die Tabellen bekommen ihre Huelle, lange IDs duerfen umbrechen. Geprueft mit einer neuen Aufnahme in Telefonbreite (--mobil). Dabei ein eigener Fehler aus #037 aufgefallen: Die Laufzeit-Detailseite rechnete weiter mit dem Listenpreis statt mit dem Betrag nach Rabatt - Marge und Vorschlag fuer die Kundenrechnung waren um den Rabatt zu hoch. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
# #038 Seite wird auf dem Handy herausgezoomt
|
||||
**Status:** erledigt
|
||||
**Meilenstein:** v0.22.1
|
||||
**Labels:** bug, ui
|
||||
**Geschätzt:** 2 h **Tatsächlich:** 0 h 40 min
|
||||
|
||||
## Auslöser
|
||||
Zwei Meldungen aus dem Einsatz: Beim Öffnen der Warnungen verkleinerte sich die ganze Seite, und die
|
||||
Host-Detailansicht saß verschoben im Bild.
|
||||
|
||||
## Ursache
|
||||
Beides derselbe Mechanismus: Ein Element ist breiter als das Fenster, also zoomt der Browser die
|
||||
**ganze Seite** heraus, damit sie hineinpasst. Drei Verursacher:
|
||||
|
||||
1. Die Klappliste der Warnungen war mit 22 rem fest breiter als ein 390-px-Fenster.
|
||||
2. Drei Tabellen in der Host-Detailansicht (Keys, Server-IDs, Tokens) standen ohne
|
||||
`table-responsive` – anders als die übrigen.
|
||||
3. Eine 32-stellige Server-ID bricht nicht von selbst um.
|
||||
|
||||
## Behebung
|
||||
- Klapplisten richten sich auf dem Telefon am Fenster aus (`position: fixed`, links und rechts 0,5 rem,
|
||||
höchstens 70 % Fensterhöhe mit eigenem Scroll) statt am Knopf
|
||||
- Die drei Tabellen bekommen ihre Hülle
|
||||
- Lange Schlüssel und IDs dürfen umbrechen (`overflow-wrap: anywhere`)
|
||||
- `npm run screenshots -- --mobil name=/pfad` nimmt gezielt eine Seite in Telefonbreite auf; damit
|
||||
wurde die Host-Detailansicht gegengeprüft
|
||||
|
||||
## Nachtrag zu #037
|
||||
Beim Prüfen fiel auf, dass die Laufzeit-Detailseite noch mit dem **Listenpreis** rechnete statt mit
|
||||
dem Betrag nach Rabatt – Marge und Vorschlag für die Kundenrechnung waren dort um den Rabatt zu hoch.
|
||||
Die Seite zeigt jetzt „990,00 € · 1.100,00 € − 110,00 € Rabatt“ und rechnet mit 990.
|
||||
@@ -41,4 +41,5 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
|
||||
| [#035](035-mobile-tabellen.md) | Tabellen auf dem Handy als Karten | erledigt | v0.21.0 | 3 h | 0 h 50 min |
|
||||
| [#036](036-standort-am-host.md) | Standort am Host setzen | erledigt | v0.21.0 | 1 h | 0 h 30 min |
|
||||
| [#037](037-rabatt-und-ablauf.md) | Rabatt je Position und der tatsächliche Ablauf | erledigt | v0.22.0 | 3 h | 0 h 55 min |
|
||||
| | **Summe** | | | **160 h** | **19 h 53 min** |
|
||||
| [#038](038-ueberbreite-handy.md) | Seite wird auf dem Handy herausgezoomt | erledigt | v0.22.1 | 2 h | 0 h 40 min |
|
||||
| | **Summe** | | | **162 h** | **20 h 33 min** |
|
||||
|
||||
Reference in New Issue
Block a user