fix(audit): wrap overflow-menu labels instead of clipping them
A popup menu is width-capped at ~280px, so the full-sentence German entries in the audit overflow menu ran past the edge. The clipped tail of the reset entry was exactly the "(nur local/dev)" scope that keeps it from reading as "delete evidence", and the label's centre landed outside the hit box. Guard in responsive_test: the page-level overflow sweep cannot see popup menus (their width does not follow the window), which is why this went unnoticed. Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it
parent
c6a0b1a267
commit
415f8a7ddb
3 changed files with 86 additions and 18 deletions
|
|
@ -52,6 +52,12 @@ Approvals usertest-panel hardening:
|
|||
(not "PROMPT"), and the no-data hint drops developer jargon.
|
||||
- **Copy the run id in one click**, and the history payload renders
|
||||
with the same JSON pretty-printing as the card.
|
||||
- **Audit overflow-menu entries no longer run off the menu.** A
|
||||
popup menu is width-capped, so the full-sentence German labels
|
||||
were clipped — on the reset entry exactly the "(nur local/dev)"
|
||||
that keeps it from reading as "delete evidence". Labels wrap now;
|
||||
guard in `responsive_test` (the page sweep cannot see popup menus,
|
||||
which is why it went unnoticed).
|
||||
|
||||
### Added (0.80.0)
|
||||
|
||||
|
|
|
|||
|
|
@ -326,35 +326,33 @@ class _AuditPageState extends State<AuditPage> {
|
|||
'clear' => _onClearPressed(),
|
||||
_ => null,
|
||||
},
|
||||
// Labels wrap instead of running past the menu edge: a
|
||||
// popup menu is at most 280px wide, and these entries
|
||||
// spell out what they do ("Entwicklungs-Reset: Protokoll
|
||||
// löschen … (nur local/dev)"). Unwrapped, the tail was
|
||||
// clipped — and the clipped part is exactly the
|
||||
// "nur local/dev" that keeps the entry from reading as
|
||||
// "delete evidence".
|
||||
itemBuilder: (ctx) => [
|
||||
PopupMenuItem(
|
||||
value: 'export',
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.download_outlined, size: 16),
|
||||
const SizedBox(width: ChainSpace.sm),
|
||||
Text(AppLocalizations.of(ctx)!.auditExportAction),
|
||||
],
|
||||
child: _menuLabel(
|
||||
Icons.download_outlined,
|
||||
AppLocalizations.of(ctx)!.auditExportAction,
|
||||
),
|
||||
),
|
||||
PopupMenuItem(
|
||||
value: 'export-all',
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.archive_outlined, size: 16),
|
||||
const SizedBox(width: ChainSpace.sm),
|
||||
Text(AppLocalizations.of(ctx)!.auditExportAllAction),
|
||||
],
|
||||
child: _menuLabel(
|
||||
Icons.archive_outlined,
|
||||
AppLocalizations.of(ctx)!.auditExportAllAction,
|
||||
),
|
||||
),
|
||||
PopupMenuItem(
|
||||
value: 'clear',
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.delete_sweep_outlined, size: 16),
|
||||
const SizedBox(width: ChainSpace.sm),
|
||||
Text(AppLocalizations.of(ctx)!.auditDevResetAction),
|
||||
],
|
||||
child: _menuLabel(
|
||||
Icons.delete_sweep_outlined,
|
||||
AppLocalizations.of(ctx)!.auditDevResetAction,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
|
@ -456,6 +454,17 @@ class _AuditPageState extends State<AuditPage> {
|
|||
return parts.join('');
|
||||
}
|
||||
|
||||
/// Icon + label for an overflow-menu entry. [Flexible] is the
|
||||
/// point: the menu is width-capped, so a long label has to wrap
|
||||
/// rather than run off the edge.
|
||||
Widget _menuLabel(IconData icon, String label) => Row(
|
||||
children: [
|
||||
Icon(icon, size: 16),
|
||||
const SizedBox(width: ChainSpace.sm),
|
||||
Flexible(child: Text(label)),
|
||||
],
|
||||
);
|
||||
|
||||
Color _toneFor(String type, ThemeData theme) {
|
||||
if (type.endsWith('.failed')) return theme.colorScheme.error;
|
||||
if (type.endsWith('.completed')) return theme.colorScheme.primary;
|
||||
|
|
|
|||
|
|
@ -69,4 +69,57 @@ void main() {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Popup menus have a hard width cap (~280px) that no window size
|
||||
// relaxes, so the page sweep above cannot see them overflow. The
|
||||
// audit overflow menu spells its entries out in full German
|
||||
// sentences — unwrapped, the tail was clipped, and on the reset
|
||||
// entry the clipped tail was the "(nur local/dev)" that keeps it
|
||||
// from reading as "delete evidence".
|
||||
testWidgets('audit overflow-menu entries wrap instead of overflowing', (
|
||||
tester,
|
||||
) async {
|
||||
installFakeHub();
|
||||
tester.view.physicalSize = const Size(1280, 800);
|
||||
tester.view.devicePixelRatio = 1.0;
|
||||
addTearDown(tester.view.reset);
|
||||
|
||||
await tester.pumpWidget(
|
||||
const StudioApp(
|
||||
initialThemeMode: ThemeModeValue.dark,
|
||||
initialLocale: Locale('de'),
|
||||
),
|
||||
);
|
||||
await tester.pump(const Duration(milliseconds: 100));
|
||||
await tester.tap(find.byKey(const ValueKey('sidebar-item-audit')));
|
||||
await tester.pump(const Duration(milliseconds: 400));
|
||||
|
||||
await tester.tap(find.byTooltip('Weitere Aktionen'));
|
||||
for (var i = 0; i < 6; i++) {
|
||||
await tester.pump(const Duration(milliseconds: 200));
|
||||
}
|
||||
expect(
|
||||
tester.takeException(),
|
||||
isNull,
|
||||
reason: 'the audit overflow menu threw during layout',
|
||||
);
|
||||
|
||||
// Every entry stays inside the menu it belongs to — a label
|
||||
// that overruns is not just ugly, it is unreadable and unhittable.
|
||||
final menu = tester.getRect(find.byType(PopupMenuItem<String>).first);
|
||||
for (final label in find.byType(PopupMenuItem<String>).evaluate()) {
|
||||
final text = find.descendant(
|
||||
of: find.byWidget(label.widget),
|
||||
matching: find.byType(Text),
|
||||
);
|
||||
expect(
|
||||
tester.getRect(text).right,
|
||||
lessThanOrEqualTo(menu.right + 0.5),
|
||||
reason: 'menu label runs past the menu edge',
|
||||
);
|
||||
}
|
||||
|
||||
await tester.pumpWidget(const SizedBox.shrink());
|
||||
await tester.pump(const Duration(minutes: 1));
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue