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

resources/js/admin/mobile/EventMembersPage.tsx

@@ -358,15 +358,15 @@ export default function MobileEventMembersPage() {
                 const statusInfo = resolveStatus(member.status);
                 return (
                   <MobileCard key={member.id} padding="$3" borderColor={border}>
-                    <XStack alignItems="center" justifyContent="space-between">
-                      <YStack gap="$1">
-                        <Text fontSize="$sm" fontWeight="700" color={textStrong}>
+                    <XStack alignItems="flex-start" justifyContent="space-between" gap="$2">
+                      <YStack gap="$1" flex={1} minWidth={0}>
+                        <Text fontSize="$sm" fontWeight="700" color={textStrong} numberOfLines={2}>
                           {member.name || member.email || t('events.members.fallbackName', 'Guest')}
                         </Text>
-                        <Text fontSize="$xs" color={muted}>
+                        <Text fontSize="$xs" color={muted} numberOfLines={2}>
                           {member.email ?? ''}
                         </Text>
-                        <XStack gap="$1.5" alignItems="center">
+                        <XStack gap="$1.5" alignItems="center" flexWrap="wrap">
                           <PillBadge tone={statusInfo.tone}>
                             {statusInfo.label}
                           </PillBadge>