From cffe8e6cd45f033e0a88aad5c4d049802a6cea7a Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Wed, 4 Feb 2026 08:55:45 +0100
Subject: [PATCH] Fix filter pill sizing for admin filters

---
 .../js/admin/mobile/EventControlRoomPage.tsx  |  6 +++++
 .../js/admin/mobile/EventMembersPage.tsx      |  6 +++++
 resources/js/admin/mobile/EventsPage.tsx      | 27 ++++++++++---------
 .../js/admin/mobile/NotificationsPage.tsx     |  2 ++
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/resources/js/admin/mobile/EventControlRoomPage.tsx b/resources/js/admin/mobile/EventControlRoomPage.tsx
index 12039fd9..bdecc225 100644
--- a/resources/js/admin/mobile/EventControlRoomPage.tsx
+++ b/resources/js/admin/mobile/EventControlRoomPage.tsx
@@ -1397,6 +1397,9 @@ export default function MobileEventControlRoomPage() {
                         borderColor={border}
                         paddingVertical="$2"
                         paddingHorizontal="$3"
+                        width="auto"
+                        minWidth="max-content"
+                        flexShrink={0}
                         hoverStyle={{ backgroundColor: '$backgroundHover' }}
                         pressStyle={{ backgroundColor: '$backgroundPress' }}
                         activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
@@ -1569,6 +1572,9 @@ export default function MobileEventControlRoomPage() {
                         borderColor={border}
                         paddingVertical="$2"
                         paddingHorizontal="$3"
+                        width="auto"
+                        minWidth="max-content"
+                        flexShrink={0}
                         hoverStyle={{ backgroundColor: '$backgroundHover' }}
                         pressStyle={{ backgroundColor: '$backgroundPress' }}
                         activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
diff --git a/resources/js/admin/mobile/EventMembersPage.tsx b/resources/js/admin/mobile/EventMembersPage.tsx
index 862c5608..8e759287 100644
--- a/resources/js/admin/mobile/EventMembersPage.tsx
+++ b/resources/js/admin/mobile/EventMembersPage.tsx
@@ -250,6 +250,9 @@ export default function MobileEventMembersPage() {
                 borderRadius="$pill"
                 paddingHorizontal="$3"
                 paddingVertical="$1.5"
+                width="auto"
+                minWidth="max-content"
+                flexShrink={0}
               >
                 <Text fontSize="$xs" fontWeight="600">
                   {option.label}
@@ -282,6 +285,9 @@ export default function MobileEventMembersPage() {
                 borderRadius="$pill"
                 paddingHorizontal="$3"
                 paddingVertical="$1.5"
+                width="auto"
+                minWidth="max-content"
+                flexShrink={0}
               >
                 <Text fontSize="$xs" fontWeight="600">
                   {option.label}
diff --git a/resources/js/admin/mobile/EventsPage.tsx b/resources/js/admin/mobile/EventsPage.tsx
index 6077eef9..cc7ea4be 100644
--- a/resources/js/admin/mobile/EventsPage.tsx
+++ b/resources/js/admin/mobile/EventsPage.tsx
@@ -324,18 +324,21 @@ function EventsList({
                 {filters.map((filter) => {
                   const active = filter.key === statusFilter;
                   return (
-                    <ToggleGroup.Item
-                      key={filter.key}
-                      value={filter.key}
-                      borderRadius="$4"
-                      borderWidth={1}
-                      borderColor={border}
-                      paddingVertical="$2"
-                      paddingHorizontal="$3"
-                      hoverStyle={{ backgroundColor: '$backgroundHover' }}
-                      pressStyle={{ backgroundColor: '$backgroundPress' }}
-                      activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
-                    >
+                  <ToggleGroup.Item
+                    key={filter.key}
+                    value={filter.key}
+                    borderRadius="$4"
+                    borderWidth={1}
+                    borderColor={border}
+                    paddingVertical="$2"
+                    paddingHorizontal="$3"
+                    width="auto"
+                    minWidth="max-content"
+                    flexShrink={0}
+                    hoverStyle={{ backgroundColor: '$backgroundHover' }}
+                    pressStyle={{ backgroundColor: '$backgroundPress' }}
+                    activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
+                  >
                       <XStack alignItems="center" gap="$2">
                         <Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
                           {filter.label}
diff --git a/resources/js/admin/mobile/NotificationsPage.tsx b/resources/js/admin/mobile/NotificationsPage.tsx
index c47a6931..4f94d102 100644
--- a/resources/js/admin/mobile/NotificationsPage.tsx
+++ b/resources/js/admin/mobile/NotificationsPage.tsx
@@ -586,6 +586,8 @@ export default function MobileNotificationsPage() {
             paddingHorizontal="$3"
             flexGrow={1}
             justifyContent="center"
+            width="auto"
+            minWidth="max-content"
           >
             <Text fontSize="$xs" fontWeight="600" textAlign="center">
               {filter.label}