Fix sticky task search bar

resources/js/admin/mobile/EventTasksPage.tsx

@@ -750,6 +750,12 @@ export default function MobileEventTasksPage() {
             </YStack>
           </Card>
 
+          <YStack
+            position="sticky"
+            zIndex={45}
+            width="100%"
+            style={{ top: 'calc(env(safe-area-inset-top, 0px) + 76px)' }}
+          >
             <Card
               borderRadius={20}
               borderWidth={2}
@@ -760,11 +766,6 @@ export default function MobileEventTasksPage() {
               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">
                 <XStack flex={1}>
@@ -801,6 +802,7 @@ export default function MobileEventTasksPage() {
               </XStack>
             </Card>
           </YStack>
+        </YStack>
       ) : null}
 
       {loading ? (

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' }),