From 6ab24e65a187949309508900f4652552c36bcc11 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Tue, 20 Jan 2026 13:29:43 +0100
Subject: [PATCH] Refine event status filter styling

---
 resources/js/admin/mobile/EventsPage.tsx | 78 +++++++++++++++---------
 1 file changed, 49 insertions(+), 29 deletions(-)

diff --git a/resources/js/admin/mobile/EventsPage.tsx b/resources/js/admin/mobile/EventsPage.tsx
index 90a031f..ee4bb8f 100644
--- a/resources/js/admin/mobile/EventsPage.tsx
+++ b/resources/js/admin/mobile/EventsPage.tsx
@@ -313,36 +313,56 @@ function EventsList({
               </Text>
             </XStack>
             <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-              <ToggleGroup
-                type="single"
-                value={statusFilter}
-                onValueChange={(value) => value && onStatusChange(value as EventStatusKey)}
+              <XStack
+                alignItems="center"
+                padding="$1"
+                borderRadius={999}
+                borderWidth={1}
+                borderColor={border}
+                backgroundColor={surfaceMuted}
               >
-                <XStack space="$2" paddingVertical="$1">
-                  {filters.map((filter) => {
-                    const active = filter.key === statusFilter;
-                    return (
-                      <ToggleGroup.Item
-                        key={filter.key}
-                        value={filter.key}
-                        borderRadius={999}
-                        borderWidth={1}
-                        borderColor={active ? activeBorder : border}
-                        backgroundColor={active ? activeBg : surface}
-                        paddingVertical="$2"
-                        paddingHorizontal="$3"
-                      >
-                        <XStack alignItems="center" space="$1.5">
-                          <Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
-                            {filter.label}
-                          </Text>
-                          <PillBadge tone={active ? 'success' : 'muted'}>{filter.count}</PillBadge>
-                        </XStack>
-                      </ToggleGroup.Item>
-                    );
-                  })}
-                </XStack>
-              </ToggleGroup>
+                <ToggleGroup
+                  type="single"
+                  value={statusFilter}
+                  onValueChange={(value) => value && onStatusChange(value as EventStatusKey)}
+                >
+                  <XStack space="$1.5">
+                    {filters.map((filter) => {
+                      const active = filter.key === statusFilter;
+                      return (
+                        <ToggleGroup.Item
+                          key={filter.key}
+                          value={filter.key}
+                          borderRadius={999}
+                          borderWidth={1}
+                          borderColor={active ? activeBorder : 'transparent'}
+                          backgroundColor={active ? activeBg : 'transparent'}
+                          paddingVertical="$1.5"
+                          paddingHorizontal="$3"
+                        >
+                          <XStack alignItems="center" space="$1.5">
+                            <Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
+                              {filter.label}
+                            </Text>
+                            <XStack
+                              paddingHorizontal="$1.5"
+                              paddingVertical="$0.5"
+                              borderRadius={999}
+                              borderWidth={1}
+                              borderColor={active ? activeBorder : border}
+                              backgroundColor={surface}
+                            >
+                              <Text fontSize={10} fontWeight="800" color={active ? primary : muted}>
+                                {filter.count}
+                              </Text>
+                            </XStack>
+                          </XStack>
+                        </ToggleGroup.Item>
+                      );
+                    })}
+                  </XStack>
+                </ToggleGroup>
+              </XStack>
             </ScrollView>
           </YStack>