Layout-Probleme auf schmalen Displays #27

New issue

Closed

opened 2026-09-09 20:12:49 +00:00 by Aceless · 1 comment

Aceless commented

2026-09-09 20:12:49 +00:00

Owner

1. RecipeCard: drei Chips in einer starren Row (recipe_card.dart:388-404):

Row(children: [
  _buildInfoChip(context, Icons.access_time, '${recipe.totalTime} Min'),
  _buildInfoChip(context, Icons.people, '${recipe.servings} Portionen'),
  _buildDifficultyChip(context),
])

Ohne Wrap, Flexible oder Scroll. Bei dreistelligen Minuten oder Portionen und schmalen Geraeten (320-360 dp) laeuft die Zeile ueber - gelb-schwarzer RenderFlex-Overflow.

2. Rezept-Editor: drei Zahlenfelder nebeneinander (recipe_edit_screen.dart:331-362): "Vorbereitung (Min)", "Kochzeit (Min)" und "Portionen" liegen als je ein Expanded in einer Row. Die Labels sind normale Text-Widgets ohne maxLines/overflow und werden auf schmalen Geraeten abgeschnitten. LabeledTextField hat zwar eine isTight-Erkennung fuer das Padding, das Label selbst bleibt aber ungeschuetzt.

3. Fixe Hoehen ohne Beruecksichtigung der Systemschriftgroesse: daily_plan_screen.dart:187 (height: 80), recipe_detail_screen.dart:221 (height: 150), recipe_edit_screen.dart:832 (height: 120). Bei erhoehtem Text-Scaling laufen die Inhalte ueber.

Vorschlag: Chips in Wrap setzen, Labels mit maxLines: 1, overflow: TextOverflow.ellipsis versehen, die drei Zahlenfelder unterhalb einer Breitengrenze untereinander stapeln und fixe Hoehen an MediaQuery.textScalerOf(context) koppeln.

**1. RecipeCard: drei Chips in einer starren Row** (`recipe_card.dart:388-404`): ```dart Row(children: [ _buildInfoChip(context, Icons.access_time, '${recipe.totalTime} Min'), _buildInfoChip(context, Icons.people, '${recipe.servings} Portionen'), _buildDifficultyChip(context), ]) ``` Ohne `Wrap`, `Flexible` oder Scroll. Bei dreistelligen Minuten oder Portionen und schmalen Geraeten (320-360 dp) laeuft die Zeile ueber - gelb-schwarzer RenderFlex-Overflow. **2. Rezept-Editor: drei Zahlenfelder nebeneinander** (`recipe_edit_screen.dart:331-362`): "Vorbereitung (Min)", "Kochzeit (Min)" und "Portionen" liegen als je ein `Expanded` in einer Row. Die Labels sind normale `Text`-Widgets ohne `maxLines`/`overflow` und werden auf schmalen Geraeten abgeschnitten. `LabeledTextField` hat zwar eine `isTight`-Erkennung fuer das Padding, das Label selbst bleibt aber ungeschuetzt. **3. Fixe Hoehen** ohne Beruecksichtigung der Systemschriftgroesse: `daily_plan_screen.dart:187` (`height: 80`), `recipe_detail_screen.dart:221` (`height: 150`), `recipe_edit_screen.dart:832` (`height: 120`). Bei erhoehtem Text-Scaling laufen die Inhalte ueber. **Vorschlag:** Chips in `Wrap` setzen, Labels mit `maxLines: 1, overflow: TextOverflow.ellipsis` versehen, die drei Zahlenfelder unterhalb einer Breitengrenze untereinander stapeln und fixe Hoehen an `MediaQuery.textScalerOf(context)` koppeln.

Aceless added the

enhancement

label

2026-09-09 20:12:49 +00:00

Aceless commented

2026-09-09 21:13:34 +00:00

Author

Owner

Behoben auf Branch frontend-improvements.

RecipeCard-Chips in einem Wrap, die drei Zahlenfelder im Editor stapeln unter 360dp, Labels mit maxLines und ellipsis.

Commits

47edeeb Added Claude
9b16a6e Einstellungen mit Ladebalken, url_launcher-Plugin-Registrierung
8ad68a4 Settings erreichbar, Secrets sichern, Theme-Tokens, toter Code weg, Tests
bf204d3 Rezeptliste, Detail, Vorschlaege und Spaces ueberarbeiten
d85c681 Rezept-Editor: Absturz, stiller Datenverlust und Controller-Leaks beheben
d970fbe Provider-State korrigieren, Fehler sichtbar machen, Wochenlogik zentralisieren
71e557d Start entkoppeln, API-Client haerten, Theme auf Tokens umstellen

flutter analyze: 0 Issues. flutter test: 22 Tests gruen.

Behoben auf Branch `frontend-improvements`. RecipeCard-Chips in einem Wrap, die drei Zahlenfelder im Editor stapeln unter 360dp, Labels mit maxLines und ellipsis. <details><summary>Commits</summary> - 47edeeb Added Claude - 9b16a6e Einstellungen mit Ladebalken, url_launcher-Plugin-Registrierung - 8ad68a4 Settings erreichbar, Secrets sichern, Theme-Tokens, toter Code weg, Tests - bf204d3 Rezeptliste, Detail, Vorschlaege und Spaces ueberarbeiten - d85c681 Rezept-Editor: Absturz, stiller Datenverlust und Controller-Leaks beheben - d970fbe Provider-State korrigieren, Fehler sichtbar machen, Wochenlogik zentralisieren - 71e557d Start entkoppeln, API-Client haerten, Theme auf Tokens umstellen </details> `flutter analyze`: 0 Issues. `flutter test`: 22 Tests gruen.

Aceless closed this issue

2026-09-09 21:13:34 +00:00

Aceless referenced this issue from a commit

2026-09-09 21:14:44 +00:00

Rezeptliste, Detail, Vorschlaege und Spaces ueberarbeiten

Aceless referenced this issue from a commit

2026-09-09 21:14:44 +00:00

Settings erreichbar, Secrets sichern, Theme-Tokens, toter Code weg, Tests

Aceless referenced this issue

2026-09-09 21:15:30 +00:00

Frontend: Abstuerze, stiller Datenverlust und unerreichbare Features beheben #59

Aceless referenced this issue from a commit