admin mobile: improve small-screen readability across checklist, tabs, badges, and headers

resources/js/admin/mobile/EventsPage.tsx

@@ -449,11 +449,11 @@ function EventListItem({
   const stats = buildEventListStats(event);
   return (
     <YStack gap="$1.5">
-      <XStack alignItems="center" justifyContent="space-between" gap="$2">
-        <Text fontSize="$md" fontWeight="800" color={text}>
+      <XStack alignItems="flex-start" justifyContent="space-between" gap="$2" flexWrap="wrap">
+        <Text fontSize="$md" fontWeight="800" color={text} flex={1} minWidth={0}>
           {renderName(event.name, t)}
         </Text>
-        <XStack alignItems="center" gap="$1.5">
+        <XStack alignItems="center" gap="$1.5" flexWrap="wrap" justifyContent="flex-end">
           <PillBadge tone={statusTone}>{statusLabel}</PillBadge>
           {onEdit ? (
             <Pressable onPress={() => onEdit(event.slug)}>