External/oott
1
0
Fork 0
mirror of https://github.com/rzuasti/oott.git synced 2026-07-08 19:21:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Wrap device detail action buttons on narrow screens

Browse Source 
The action button row used a fixed Spacer that couldn't shrink, causing a
horizontal overflow on phone widths. Keep the spread-out Row on wide screens
and fall back to a Wrap on narrow ones.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rzuasti
2026-06-12 10:27:44 -04:00
co-authored by Claude Opus 4.8
parent dce683e396
commit 2c3dc30811
1 changed files with 54 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/lib/devices/device_detail.dart
+54 -36
View File
@@ -225,55 +225,73 @@ class _DeviceActions extends StatelessWidget {
foregroundColor: colorScheme.error, foregroundColor: colorScheme.error,
); );
final List<Widget> leading;
final Widget destructive;
if (device.isRegistered) { if (device.isRegistered) {
return Row( leading = [
children: [ FilledButton.icon(
FilledButton.icon( onPressed: () => showEditDeviceDialog(context, device, onAction),
onPressed: () => showEditDeviceDialog(context, device, onAction), icon: const Icon(Icons.edit),
icon: const Icon(Icons.edit), label: const Text('Edit'),
label: const Text('Edit'), ),
), ];
const Spacer(), destructive = TextButton.icon(
TextButton.icon( style: destructiveStyle,
style: destructiveStyle, onPressed: () => confirmForgetDevice(
onPressed: () => confirmForgetDevice( context,
context, device,
device, onAction,
onAction, onDeleted: () => context.go(Routes.devices),
onDeleted: () => context.go(Routes.devices), ),
), icon: const Icon(Icons.link_off),
icon: const Icon(Icons.link_off), label: const Text('Forget Device'),
label: const Text('Forget Device'),
),
],
); );
} } else {
return Row( leading = [
children: [
FilledButton.icon( FilledButton.icon(
onPressed: () => showRegisterDeviceDialog(context, device, onAction), onPressed: () => showRegisterDeviceDialog(context, device, onAction),
icon: const Icon(Icons.how_to_reg), icon: const Icon(Icons.how_to_reg),
label: const Text('Register Device'), label: const Text('Register Device'),
), ),
const SizedBox(width: Insets.md),
TextButton.icon( TextButton.icon(
onPressed: () => showDeviceIdentificationDialog(context, device), onPressed: () => showDeviceIdentificationDialog(context, device),
icon: const Icon(Icons.help_outline), icon: const Icon(Icons.help_outline),
label: const Text('How to identify'), label: const Text('How to identify'),
), ),
const Spacer(), ];
TextButton.icon( destructive = TextButton.icon(
style: destructiveStyle, style: destructiveStyle,
onPressed: () => confirmDeleteDevice( onPressed: () => confirmDeleteDevice(
context, context,
device, device,
onAction, onAction,
onDeleted: () => context.go(Routes.devices), onDeleted: () => context.go(Routes.devices),
),
icon: const Icon(Icons.delete_outline),
label: const Text('Delete'),
), ),
], icon: const Icon(Icons.delete_outline),
label: const Text('Delete'),
);
}
final isWide = MediaQuery.sizeOf(context).width >= Breakpoints.medium;
if (isWide) {
return Row(
children: [
for (var i = 0; i < leading.length; i++) ...[
if (i > 0) const SizedBox(width: Insets.md),
leading[i],
],
const Spacer(),
destructive,
],
);
}
// On narrow phone widths the buttons don't fit on one line, so let them
// wrap instead of overflowing.
return Wrap(
spacing: Insets.md,
runSpacing: Insets.sm,
children: [...leading, destructive],
); );
} }
} }