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

resources/js/admin/mobile/DashboardPage.tsx

@@ -629,9 +629,9 @@ function LifecycleHero({
                     paddingHorizontal="$3"
                     onPress={() => navigate(adminPath(nextStep.targetPath))}
                     title={
-                      <XStack alignItems="center" gap="$2">
+                      <XStack alignItems="flex-start" gap="$2" flex={1} minWidth={0}>
                         <Circle size={18} color={theme.primary} strokeWidth={2.5} />
-                        <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
+                        <Text fontSize="$sm" fontWeight="700" color={theme.textStrong} flexShrink={1}>
                           {nextStep.label}
                         </Text>
                       </XStack>
@@ -644,8 +644,17 @@ function LifecycleHero({
                       ) : undefined
                     }
                     iconAfter={
-                      <XStack alignItems="center" gap="$1">
-                        <PillBadge tone="success">{nextStep.ctaLabel}</PillBadge>
+                      <XStack alignItems="center" gap="$1" maxWidth="52%" flexShrink={1}>
+                        <Text
+                          fontSize="$xs"
+                          fontWeight="700"
+                          color={theme.primary}
+                          textAlign="right"
+                          numberOfLines={2}
+                          flexShrink={1}
+                        >
+                          {nextStep.ctaLabel}
+                        </Text>
                         <ChevronRight size={16} color={theme.muted} />
                       </XStack>
                     }