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

This commit is contained in:
Levi authored and GitHub committed 2026-10-14 20:09:08 +08:00
1 parent 12860bb207
commit eee39e012f
5 files changed
+11 -8

No files matched your search

+1 -1
View File
@@ -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`
@@ -32,7 +32,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) {
@@ -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)),
],
),
),
@@ -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;
+5 -4
View File
@@ -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);