Skip to content

fix(ui): widen navigation rail for macOS traffic lights #1582

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
monkeyWie wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(ui): widen navigation rail for macOS traffic lights #1582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bbf1a9f
fix(ui): widen navigation rail for macOS traffic lights
monkeyWie Oct 10, 2026
26d54e2
Merge branch 'main' into codex/fix-macos-navigation-width
monkeyWie Oct 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/flutter/AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
3 changes: 2 additions & 1 deletion ui/flutter/lib/features/extensions/presentation/pages/extensions_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion ui/flutter/lib/features/settings/presentation/pages/settings_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
],
),
),
Expand Down
3 changes: 2 additions & 1 deletion ui/flutter/lib/shared/theme/app_design_tokens.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 5 additions & 4 deletions ui/flutter/test/widget_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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));
Expand All @@ -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)],
Expand All @@ -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);
Expand Down
Loading