Fix sticky task search bar

resources/js/admin/mobile/EventTasksPage.tsx

@@ -750,56 +750,58 @@ export default function MobileEventTasksPage() {
             </YStack>
           </Card>
 
-          <Card
+          <YStack
-            borderRadius={20}
+            position="sticky"
-            borderWidth={2}
+            zIndex={45}
-            borderColor={stickyBorder}
+            width="100%"
-            backgroundColor={stickySurface}
+            style={{ top: 'calc(env(safe-area-inset-top, 0px) + 76px)' }}
-            padding="$3"
-            shadowColor={stickyShadow}
-            shadowOpacity={0.16}
-            shadowRadius={16}
-            shadowOffset={{ width: 0, height: 10 }}
-            style={{
-              position: 'sticky',
-              top: 'calc(env(safe-area-inset-top, 0px) + 76px)',
-              zIndex: 45,
-            }}
           >
-            <XStack alignItems="center" space="$2">
+            <Card
-              <XStack flex={1}>
+              borderRadius={20}
-                <MobileInput
+              borderWidth={2}
-                  type="search"
+              borderColor={stickyBorder}
-                  value={searchTerm}
+              backgroundColor={stickySurface}
-                  onChange={(e) => setSearchTerm(e.target.value)}
+              padding="$3"
-                  placeholder={t('events.tasks.search', 'Search photo tasks')}
+              shadowColor={stickyShadow}
-                  compact
+              shadowOpacity={0.16}
-                />
+              shadowRadius={16}
-              </XStack>
+              shadowOffset={{ width: 0, height: 10 }}
-              <Pressable onPress={() => setShowEmotionFilterSheet(true)}>
+            >
-                <XStack
+              <XStack alignItems="center" space="$2">
-                  alignItems="center"
+                <XStack flex={1}>
-                  space="$1.5"
+                  <MobileInput
-                  paddingVertical="$2"
+                    type="search"
-                  paddingHorizontal="$3"
+                    value={searchTerm}
-                  borderRadius={14}
+                    onChange={(e) => setSearchTerm(e.target.value)}
-                  borderWidth={1}
+                    placeholder={t('events.tasks.search', 'Search photo tasks')}
-                  borderColor={border}
+                    compact
-                  backgroundColor={surface}
+                  />
-                >
-                  <Text fontSize={11} fontWeight="700" color={text}>
-                    {t('events.tasks.emotionFilterShort', 'Emotion')}
-                  </Text>
-                  <Text fontSize={11} color={muted}>
-                    {emotionFilter
-                      ? emotions.find((e) => String(e.id) === emotionFilter)?.name ?? t('events.tasks.customEmotion', 'Custom emotion')
-                      : t('events.tasks.allEmotions', 'All')}
-                  </Text>
-                  <ChevronDown size={14} color={muted} />
                 </XStack>
-              </Pressable>
+                <Pressable onPress={() => setShowEmotionFilterSheet(true)}>
-            </XStack>
+                  <XStack
-          </Card>
+                    alignItems="center"
+                    space="$1.5"
+                    paddingVertical="$2"
+                    paddingHorizontal="$3"
+                    borderRadius={14}
+                    borderWidth={1}
+                    borderColor={border}
+                    backgroundColor={surface}
+                  >
+                    <Text fontSize={11} fontWeight="700" color={text}>
+                      {t('events.tasks.emotionFilterShort', 'Emotion')}
+                    </Text>
+                    <Text fontSize={11} color={muted}>
+                      {emotionFilter
+                        ? emotions.find((e) => String(e.id) === emotionFilter)?.name ?? t('events.tasks.customEmotion', 'Custom emotion')
+                        : t('events.tasks.allEmotions', 'All')}
+                    </Text>
+                    <ChevronDown size={14} color={muted} />
+                  </XStack>
+                </Pressable>
+              </XStack>
+            </Card>
+          </YStack>
         </YStack>
       ) : null}
 

resources/js/admin/mobile/__tests__/EventTasksPage.test.tsx

@@ -270,6 +270,8 @@ describe('MobileEventTasksPage', () => {
     expect(await screen.findByText('Photo tasks for this event')).toBeInTheDocument();
     expect(screen.getByText('Quick jump')).toBeInTheDocument();
     expect(screen.getByText('assigned')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search photo tasks')).toBeInTheDocument();
+    expect(screen.getByText('Emotion')).toBeInTheDocument();
 
     expect(api.getTaskCollections).toHaveBeenCalledWith(
       expect.objectContaining({ event_type: 'wedding' }),