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,
);
final List<Widget> leading;
final Widget destructive;
if (device.isRegistered) {
return Row(
children: [
FilledButton.icon(
onPressed: () => showEditDeviceDialog(context, device, onAction),
icon: const Icon(Icons.edit),
label: const Text('Edit'),
),
const Spacer(),
TextButton.icon(
style: destructiveStyle,
onPressed: () => confirmForgetDevice(
context,
device,
onAction,
onDeleted: () => context.go(Routes.devices),
),
icon: const Icon(Icons.link_off),
label: const Text('Forget Device'),
),
],
leading = [
FilledButton.icon(
onPressed: () => showEditDeviceDialog(context, device, onAction),
icon: const Icon(Icons.edit),
label: const Text('Edit'),
),
];
destructive = TextButton.icon(
style: destructiveStyle,
onPressed: () => confirmForgetDevice(
context,
device,
onAction,
onDeleted: () => context.go(Routes.devices),
),
icon: const Icon(Icons.link_off),
label: const Text('Forget Device'),
);
}
return Row(
children: [
} else {
leading = [
FilledButton.icon(
onPressed: () => showRegisterDeviceDialog(context, device, onAction),
icon: const Icon(Icons.how_to_reg),
label: const Text('Register Device'),
),
const SizedBox(width: Insets.md),
TextButton.icon(
onPressed: () => showDeviceIdentificationDialog(context, device),
icon: const Icon(Icons.help_outline),
label: const Text('How to identify'),
),
const Spacer(),
TextButton.icon(
style: destructiveStyle,
onPressed: () => confirmDeleteDevice(
context,
device,
onAction,
onDeleted: () => context.go(Routes.devices),
),
icon: const Icon(Icons.delete_outline),
label: const Text('Delete'),
];
destructive = TextButton.icon(
style: destructiveStyle,
onPressed: () => confirmDeleteDevice(
context,
device,
onAction,
onDeleted: () => context.go(Routes.devices),
),
],
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],
);
}
}