diff --git a/ui/flutter/AGENTS.md b/ui/flutter/AGENTS.md index f827385c6..e20be7734 100644 --- a/ui/flutter/AGENTS.md +++ b/ui/flutter/AGENTS.md @@ -126,7 +126,7 @@ Guidelines: Use the following desktop reference metrics unless a specific screen requires a documented exception: - Reference window: `1024 x 768` -- Primary rail width: `64px` +- Primary rail width: `78px` (reserves space for native macOS traffic lights) - Secondary filter sidebar width: `256px` - Main content header height: `80px` - Window drag header height on Windows: `30px` diff --git a/ui/flutter/lib/features/extensions/presentation/pages/extensions_page.dart b/ui/flutter/lib/features/extensions/presentation/pages/extensions_page.dart index 9d7206056..043952ce4 100644 --- a/ui/flutter/lib/features/extensions/presentation/pages/extensions_page.dart +++ b/ui/flutter/lib/features/extensions/presentation/pages/extensions_page.dart @@ -30,7 +30,8 @@ import '../widgets/extension_setting_field.dart'; import '../widgets/extension_update_dialog.dart'; import '../widgets/extension_update_status.dart'; -const _extensionCardMinWidth = 290.0; +// Keep three columns in the 1024px reference window with the wider primary rail. +const _extensionCardMinWidth = 280.0; const _extensionGridSpacing = 10.0; int _extensionGridColumnCount(double width) { diff --git a/ui/flutter/lib/features/settings/presentation/pages/settings_page.dart b/ui/flutter/lib/features/settings/presentation/pages/settings_page.dart index c78a18a1b..eb1059594 100644 --- a/ui/flutter/lib/features/settings/presentation/pages/settings_page.dart +++ b/ui/flutter/lib/features/settings/presentation/pages/settings_page.dart @@ -2128,7 +2128,7 @@ class _BrowserExtensionLinks extends StatelessWidget { children: [ const Icon(Icons.open_in_new, size: 15), const SizedBox(width: AppDesignTokens.space8), - Text(link.label), + Flexible(child: Text(link.label, maxLines: 1, overflow: TextOverflow.ellipsis)), ], ), ), diff --git a/ui/flutter/lib/shared/theme/app_design_tokens.dart b/ui/flutter/lib/shared/theme/app_design_tokens.dart index 615fb139e..4904b483f 100644 --- a/ui/flutter/lib/shared/theme/app_design_tokens.dart +++ b/ui/flutter/lib/shared/theme/app_design_tokens.dart @@ -5,7 +5,8 @@ class AppDesignTokens { static const double windowHeaderHeight = 30; static const double windowRadius = 12; - static const double railWidth = 68; + // Leave room for native macOS traffic lights while keeping rail widths consistent across platforms. + static const double railWidth = 78; static const double filterSidebarWidth = 192; static const double contentHeaderHeight = 48; static const double taskRowHeight = 72; diff --git a/ui/flutter/test/widget_test.dart b/ui/flutter/test/widget_test.dart index 2d7ae42ff..393b7b0bf 100644 --- a/ui/flutter/test/widget_test.dart +++ b/ui/flutter/test/widget_test.dart @@ -630,9 +630,9 @@ void main() { tester.view.physicalSize = const Size(1024, 768); await tester.pumpAndSettle(); expect(gridColumns(), 3); - expect(tester.getSize(find.byKey(const ValueKey('extension-card-extension-0'))).width, greaterThanOrEqualTo(290)); + expect(tester.getSize(find.byKey(const ValueKey('extension-card-extension-0'))).width, greaterThanOrEqualTo(280)); - tester.view.physicalSize = const Size(1028, 608); + tester.view.physicalSize = const Size(1024, 608); await tester.pumpAndSettle(); expect(gridColumns(), 3); expect(tester.getSize(find.byKey(const ValueKey('extension-search-field-container'))).width, 240); @@ -644,6 +644,7 @@ void main() { tester.view.physicalSize = const Size(720, 608); await tester.pumpAndSettle(); expect(find.byType(PrimaryRail), findsOneWidget); + expect(gridColumns(), 2); final compactSearchRect = tester.getRect(find.byKey(const ValueKey('extension-search-field-container'))); expect(compactSearchRect.width, lessThan(240)); expect(compactSearchRect.height, closeTo(sortRect.height, 0.01)); @@ -665,7 +666,7 @@ void main() { }); testWidgets('extension cards compact large counts without crowding their actions', (WidgetTester tester) async { - await _setTestSize(tester, const Size(722, 608)); + await _setTestSize(tester, const Size(720, 608)); await tester.pumpWidget( ProviderScope( overrides: [extensionsControllerProvider.overrideWith(CrowdedExtensionCardController.new)], @@ -683,7 +684,7 @@ void main() { final cardRect = tester.getRect(find.byKey(const ValueKey('extension-card-crowded-extension'))); final statsRect = tester.getRect(find.byKey(const ValueKey('extension-card-stats-crowded-extension'))); final actionsRect = tester.getRect(find.byKey(const ValueKey('extension-card-actions-crowded-extension'))); - expect(cardRect.width, closeTo(290, 0.01)); + expect(cardRect.width, closeTo(284, 0.01)); expect(statsRect.right, lessThanOrEqualTo(actionsRect.left - 8)); expect(actionsRect.right, lessThanOrEqualTo(cardRect.right - 14)); expect(tester.takeException(), isNull);