fix(quick-add): wrap sheet action row to prevent overflow on small screens

The Cancel / Save-and-add-another / Save actions were a fixed Row that
could not shrink, so on narrow phones and long locales (es/pt/de/fr) the
buttons overflowed the right edge (the clipped 'Guardar'). Replace it with
an OverflowBar that wraps onto stacked, end-aligned lines when they don't
fit; move the added-count onto its own line above.

Guard it in small_screen_overflow_test.dart across the long locales.
This commit is contained in:
vjrj 2026-07-16 00:34:42 +02:00
parent 5b64fe14b3
commit dc0d18562f
2 changed files with 48 additions and 10 deletions

View file

@ -83,20 +83,27 @@ class QuickAddSheet extends StatelessWidget {
),
if (state.expanded) const _MoreSection(),
const SizedBox(height: 8),
Row(
if (state.addedCount > 0)
Padding(
padding: const EdgeInsetsDirectional.only(bottom: 4),
child: Text(
t.quickAdd.addedCount(n: state.addedCount),
style: Theme.of(context).textTheme.bodySmall,
),
),
// OverflowBar wraps the actions onto stacked lines when the
// labels don't fit the width (small phones, long locales),
// instead of clipping with a RenderFlex overflow.
OverflowBar(
alignment: MainAxisAlignment.end,
spacing: 8,
overflowSpacing: 4,
overflowAlignment: OverflowBarAlignment.end,
children: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(t.quickAdd.cancel),
),
if (state.addedCount > 0) ...[
const SizedBox(width: 8),
Text(
t.quickAdd.addedCount(n: state.addedCount),
style: Theme.of(context).textTheme.bodySmall,
),
],
const Spacer(),
TextButton(
key: const Key('quickAdd.saveAndAddAnother'),
onPressed: state.submitting
@ -104,7 +111,6 @@ class QuickAddSheet extends StatelessWidget {
: cubit.submitAndAddAnother,
child: Text(t.quickAdd.saveAndAddAnother),
),
const SizedBox(width: 8),
FilledButton(
key: const Key('quickAdd.save'),
onPressed: state.submitting ? null : cubit.submit,