Collapse chart time-range pills to a dropdown on phones

The device detail chart's time-range selector (Today / Last week / ...)
rendered as a SegmentedButton that overflowed on narrow phone layouts.
Reuse the responsive FilterSelector widget so the same control is used
for both the list filters and the chart: segmented pills on wide layouts,
a compact dropdown combo box on phones.

To keep the two controls consistent, FilterSelector now renders a
SegmentedButton (instead of ChoiceChips) on wide layouts.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/lib/devices/device_event_history.dart

@@ -6,6 +6,7 @@ import 'package:intl/intl.dart';
 import '../model/device.dart';
 import '../model/device_event.dart';
 import '../utils/oott_api.dart';
+import '../widgets/filter_selector.dart';
 
 enum _TimeRange {
   today('Today'),
@@ -128,18 +129,14 @@ class _DeviceEventHistoryState extends State<DeviceEventHistory> {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SingleChildScrollView(
-          scrollDirection: Axis.horizontal,
-          child: SegmentedButton<_TimeRange>(
-            segments: _TimeRange.values
-                .map((r) => ButtonSegment(value: r, label: Text(r.label)))
-                .toList(),
-            selected: {_selectedRange},
-            onSelectionChanged: (selection) {
-              setState(() => _selectedRange = selection.first);
-              _loadEvents();
-            },
-          ),
+        FilterSelector<_TimeRange>(
+          values: _TimeRange.values,
+          selected: _selectedRange,
+          labelOf: (r) => r.label,
+          onSelected: (range) {
+            setState(() => _selectedRange = range);
+            _loadEvents();
+          },
         ),
         const SizedBox(height: 16),
         if (events.isEmpty)