From 40267a637f9c8527e202ab05719bf7255df7ef5f Mon Sep 17 00:00:00 2001
From: Fabian Freund <github@fabi.online>
Date: Thu, 1 Jan 2026 09:12:19 +0100
Subject: [PATCH] show border instead of changing background color for selected
 containers

---
 .../tabs/presentation/widgets/container_chips.dart |  1 +
 app/lib/presentation/widgets/selectable_chips.dart | 14 +++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/lib/features/geckoview/features/tabs/presentation/widgets/container_chips.dart b/app/lib/features/geckoview/features/tabs/presentation/widgets/container_chips.dart
index f38526e7..7b3e19d8 100644
--- a/app/lib/features/geckoview/features/tabs/presentation/widgets/container_chips.dart
+++ b/app/lib/features/geckoview/features/tabs/presentation/widgets/container_chips.dart
@@ -99,6 +99,7 @@ class ContainerChips extends HookConsumerWidget {
                   itemId: (container) => container.id,
                   itemBackgroundColor: (container) =>
                       container.color.withValues(alpha: 0.33),
+                  selectedBorderColor: Theme.of(context).colorScheme.primary,
                   itemLabel: (container) =>
                       ContainerTitle(container: container),
                   itemBadgeCount: (container) =>
diff --git a/app/lib/presentation/widgets/selectable_chips.dart b/app/lib/presentation/widgets/selectable_chips.dart
index b2440fa2..f0b8992f 100644
--- a/app/lib/presentation/widgets/selectable_chips.dart
+++ b/app/lib/presentation/widgets/selectable_chips.dart
@@ -70,6 +70,7 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
   final String? Function(T item)? itemTooltip;
   final int? Function(T item)? itemBadgeCount;
   final Color? Function(T item)? itemBackgroundColor;
+  final Color? selectedBorderColor;
 
   final Widget Function(Widget child, S item)? itemWrap;
 
@@ -85,6 +86,7 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
     this.itemWrap,
     this.itemTooltip,
     this.itemBackgroundColor,
+    this.selectedBorderColor,
     this.prefixListItems = const [],
     required this.availableItems,
     this.selectedItem,
@@ -133,6 +135,8 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
             }
 
             final item = items[index - prefixListItems.length];
+            final isSelected = selectedItem != null &&
+                itemId(item) == itemId(selectedItem as S);
             final child = Padding(
               padding: const EdgeInsets.only(right: 8.0, top: 4.0),
               child: _BadgeWrapper(
@@ -143,9 +147,7 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
                         () => callback(item),
                   ),
                   child: FilterChip(
-                    selected:
-                        selectedItem != null &&
-                        itemId(item) == itemId(selectedItem as S),
+                    selected: selectedBorderColor == null && isSelected,
                     showCheckmark: false,
                     onSelected: (value) {
                       if (value) {
@@ -163,6 +165,12 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
                     avatar: itemAvatar?.call(item),
                     tooltip: itemTooltip?.call(item),
                     backgroundColor: itemBackgroundColor?.call(item),
+                    side: isSelected && selectedBorderColor != null
+                        ? BorderSide(
+                            color: selectedBorderColor!,
+                            width: 2.0,
+                          )
+                        : null,
                   ),
                 ),
               ),