Invoice and trade screens overflow at 320 dp with 2× text in German

Aperta
  • Qualcosa non va?
#712 2 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@pgauravparashar ci sta già lavorando.

Dal 7/10/2026.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
dart, flutter
Ambito
mobile

Direzione di ricerca

Start with the named widgets in lib/features/order/widgets/invoice_widgets.dart and lib/features/trades/widgets/trade_step_block.dart, then read the 320 dp, 2× German test pattern in trade_detail_screen_test.dart. Add coverage for the listed invoice, time-up and trade states; re-measure InvoiceTimeUpView on the bond screens. Done when each case fits without overflow and tester.takeException() is null.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

good first issue priority: medium

What happens

At 320 dp wide, with text scaled to 2× and the app in German — the combination .specify/DESIGN_SYSTEM.md asks every screen to hold up in (DS-SPC-5, DS-L10N-2, DS-A11Y-4) — the buyer's invoice screen, the seller's hold-invoice screen, the bond time-up view and the trade screen overflow. Users with large text on a narrow phone get clipped content and, in debug builds, the overflow stripes.

Measured on main (7a8f7075)

Widget tests mounting each screen with Locale('de'), a 320 × 800 view and TextScaler.linear(2); each overflow reported with the widget that caused it:

Screen State Overflow Widget
Buyer's invoice (/add_invoice) waiting for the invoice 103 px right hero amount row — InvoiceHeroCard, lib/features/order/widgets/invoice_widgets.dart:205
Seller's hold invoice (/pay_invoice) QR shown 178 px right hero amount row — same InvoiceHeroCard row
Seller's hold invoice QR shown 25 px right label → value row — InvoiceCounterpartCard, invoice_widgets.dart:607
InvoiceTimeUpView time up 208–284 px bottom its Column, invoice_widgets.dart:736
Trade screen (/trade_detail) waiting step, active, fiat sent 27 px right step block header row — lib/features/trades/widgets/trade_step_block.dart:81

InvoiceTimeUpView was measured on the invoice screens, which showed it at 00:00 until #710; after #710 only the bond screens use it, so it should be re-measured there.

Likely causes

  • The hero amount is a 38-pt figure plus sats in a Row that cannot shrink or wrap; at 2× it is wider than the screen even for small amounts.
  • InvoiceCounterpartCard puts the label, the value and the reputation on one row; the value has Expanded + ellipsis, but the label and the trailing reputation do not give way.
  • InvoiceTimeUpView lays its content between two Spacers in a Column with no scroll, so at 2× it does not fit the height.
  • The step block header puts the step label and the status chip side by side with nothing allowed to wrap.

Expected

Each screen holds up at 320 dp, 2× text, German, with a widget test that proves it (tester.takeException() is null), as DS-A11Y-4 requires. The fix should keep the regular layout unchanged: the hero amount scaling down (e.g. FittedBox) rather than wrapping, rows letting their secondary piece shrink or wrap, and the time-up view scrolling. trade_detail_screen_test.dart has the pattern since #710 (the id row case: 320 dp, textScaleFactorTestValue = 2.0, German, scrolled into view).

  • The step block header puts the step label and the status chip swed to wrap.

Context

Found while reviewing #710 (the countdown change for #569), where the review bots asked for this coverage. These overflows are the same before and after #710, which does not touch these widgets. #710 fixed the one it did touch — the trade screen's order-id row (16 px without the creation date, about 618 px with it) — and covers it with a test; the rest is tracked here.

Lingua principale
Dart
Stelle
11
Fork
9
Merge medio
14h 3m
PR unite (30g)
135

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di MostroP2P/app

Tutte le issue di MostroP2P/app

Issue simili

Altre issue su Dart

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.