From aac4744cb3887ce571c0157de5e8d1e9adb36489 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Tue, 20 Jan 2026 16:43:03 +0100
Subject: [PATCH] Refine control room filter pill styling

---
 resources/js/admin/mobile/EventControlRoomPage.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/admin/mobile/EventControlRoomPage.tsx b/resources/js/admin/mobile/EventControlRoomPage.tsx
index 9187e8f4..75c278a7 100644
--- a/resources/js/admin/mobile/EventControlRoomPage.tsx
+++ b/resources/js/admin/mobile/EventControlRoomPage.tsx
@@ -1401,6 +1401,7 @@ export default function MobileEventControlRoomPage() {
                   borderWidth={1}
                   borderColor={border}
                   backgroundColor={surfaceMuted}
+                  overflow="hidden"
                 >
                   <ToggleGroup
                     type="single"
@@ -1415,15 +1416,14 @@ export default function MobileEventControlRoomPage() {
                           <ToggleGroup.Item
                             key={option.value}
                             value={option.value}
+                            unstyled
                             borderRadius={999}
                             borderWidth={1}
                             borderColor="transparent"
                             backgroundColor={active ? activeFilterBg : 'transparent'}
                             paddingVertical="$1.5"
                             paddingHorizontal="$3"
-                            {...(active
-                              ? ({ style: { boxShadow: `0 8px 18px ${withAlpha(primary, 0.35)}` } } as any)
-                              : {})}
+                            pressStyle={{ opacity: 0.85 }}
                           >
                             <XStack alignItems="center" space="$1.5">
                               <Text fontSize="$xs" fontWeight="700" color={active ? '#fff' : muted}>
@@ -1584,6 +1584,7 @@ export default function MobileEventControlRoomPage() {
                   borderWidth={1}
                   borderColor={border}
                   backgroundColor={surfaceMuted}
+                  overflow="hidden"
                 >
                   <ToggleGroup
                     type="single"
@@ -1598,15 +1599,14 @@ export default function MobileEventControlRoomPage() {
                           <ToggleGroup.Item
                             key={option.value}
                             value={option.value}
+                            unstyled
                             borderRadius={999}
                             borderWidth={1}
                             borderColor="transparent"
                             backgroundColor={active ? activeFilterBg : 'transparent'}
                             paddingVertical="$1.5"
                             paddingHorizontal="$3"
-                            {...(active
-                              ? ({ style: { boxShadow: `0 8px 18px ${withAlpha(primary, 0.35)}` } } as any)
-                              : {})}
+                            pressStyle={{ opacity: 0.85 }}
                           >
                             <XStack alignItems="center" space="$1.5">
                               <Text fontSize="$xs" fontWeight="700" color={active ? '#fff' : muted}>