From 08405c879bca5563b0558e317c03b48bb5678f89 Mon Sep 17 00:00:00 2001
From: Yandrik <me@yandrik.dev>
Date: Tue, 3 Mar 2026 16:41:43 +0100
Subject: [PATCH] fix(devices details page): style fixes

---
 lib/pages/device_details_page.dart      | 18 +++++++-------
 lib/widgets/gear_ratio_editor_card.dart | 32 +++++++++++--------------
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/lib/pages/device_details_page.dart b/lib/pages/device_details_page.dart
index 4b5418f..bf00fda 100644
--- a/lib/pages/device_details_page.dart
+++ b/lib/pages/device_details_page.dart
@@ -505,6 +505,15 @@ class _DeviceDetailsPageState extends ConsumerState<DeviceDetailsPage> {
                             },
                     ),
                     const SizedBox(height: 16),
+                    SizedBox(
+                      width: double.infinity,
+                      child: FilledButton.icon(
+                        onPressed: _connectButtonToBike,
+                        icon: const Icon(Icons.link),
+                        label: const Text('Connect Button to Bike'),
+                      ),
+                    ),
+                    const SizedBox(height: 16),
                     GearRatioEditorCard(
                       ratios: _gearRatios,
                       defaultGearIndex: _defaultGearIndex,
@@ -521,15 +530,6 @@ class _DeviceDetailsPageState extends ConsumerState<DeviceDetailsPage> {
                         ),
                       ],
                     ),
-                    const SizedBox(height: 16),
-                    SizedBox(
-                      width: double.infinity,
-                      child: FilledButton.icon(
-                        onPressed: _connectButtonToBike,
-                        icon: const Icon(Icons.link),
-                        label: const Text('Connect Button to Bike'),
-                      ),
-                    ),
                   ],
                 ],
               ),
diff --git a/lib/widgets/gear_ratio_editor_card.dart b/lib/widgets/gear_ratio_editor_card.dart
index b77051e..23e2b71 100644
--- a/lib/widgets/gear_ratio_editor_card.dart
+++ b/lib/widgets/gear_ratio_editor_card.dart
@@ -52,8 +52,6 @@ class _GearRatioEditorCardState extends State<GearRatioEditorCard> {
 
   double get _inlineAddEdgeOffset => _inlineAddRadius + 2;
 
-  double get _editorTilesTopInset => _inlineAddEdgeOffset + _inlineAddRadius;
-
   bool _isExpanded = false;
   bool _isEditing = false;
   bool _sortAscending = true;
@@ -196,7 +194,7 @@ class _GearRatioEditorCardState extends State<GearRatioEditorCard> {
                     child: AnimatedContainer(
                       duration: _animDuration,
                       curve: _animCurve,
-                      height: _isExpanded ? 210 : 130,
+                      height: _isExpanded ? 240 : 130,
                       child: _GearRatioGraph(
                         ratios: _isEditing ? _draft : _committed,
                         compact: !_isExpanded,
@@ -265,8 +263,8 @@ class _GearRatioEditorCardState extends State<GearRatioEditorCard> {
                 if (_draft.isEmpty)
                   const Padding(
                     padding: EdgeInsets.fromLTRB(14, 0, 14, 10),
-                    child:
-                        Text('No ratios yet. Load a preset to start editing.'),
+                    child: Text(
+                        'No ratios yet. Add a gear or load a preset to start editing.'),
                   ),
                 Padding(
                   padding: const EdgeInsets.fromLTRB(14, 0, 14, 8),
@@ -307,21 +305,16 @@ class _GearRatioEditorCardState extends State<GearRatioEditorCard> {
                   ),
                 ),
                 Padding(
-                  padding: const EdgeInsets.fromLTRB(10, 0, 10, 12),
+                  padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
                   child: AnimatedSwitcher(
                     duration: _animDuration,
                     switchInCurve: _animCurve,
                     switchOutCurve: Curves.easeInCubic,
                     transitionBuilder: _snappyTransition,
-                    child: Padding(
-                      padding: EdgeInsets.only(
-                        top: _editorTilesTopInset,
-                      ),
-                      child: Column(
-                        key: ValueKey('editors-$_gearLayoutVersion'),
-                        crossAxisAlignment: CrossAxisAlignment.stretch,
-                        children: _buildEditableGearTiles(context),
-                      ),
+                    child: Column(
+                      key: ValueKey('editors-$_gearLayoutVersion'),
+                      crossAxisAlignment: CrossAxisAlignment.stretch,
+                      children: _buildEditableGearTiles(context),
                     ),
                   ),
                 ),
@@ -1071,9 +1064,12 @@ class _GearRatioGraph extends StatelessWidget {
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
             if (!compact)
-              Text(
-                'Input RPM -> Output RPM',
-                style: textTheme.bodySmall,
+              Container(
+                padding: const EdgeInsets.only(bottom: 6),
+                child: Text(
+                  'Input RPM -> Output RPM',
+                  style: textTheme.bodySmall,
+                ),
               ),
             Expanded(
               child: CustomPaint(