admin mobile: improve small-screen readability across checklist, tabs, badges, and headers
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled
tests / ui (push) Has been cancelled

This commit is contained in:
Codex Agent
2026-02-08 22:13:01 +01:00
parent 83cf863548
commit e3bb1642db
11 changed files with 131 additions and 82 deletions

View File

@@ -980,8 +980,8 @@ function PackageCard({
backgroundColor={isActive ? accentSoft : undefined}
gap="$2"
>
<XStack alignItems="center" justifyContent="space-between">
<Text fontSize="$md" fontWeight="800" color={textStrong}>
<XStack alignItems="flex-start" justifyContent="space-between" gap="$2" flexWrap="wrap">
<Text fontSize="$md" fontWeight="800" color={textStrong} flex={1} minWidth={0}>
{pkg.package_name ?? t('mobileBilling.packageFallback', 'Package')}
</Text>
{label ? <PillBadge tone="success">{label}</PillBadge> : null}
@@ -1262,8 +1262,8 @@ function AddonRow({
return (
<MobileCard borderColor={border} padding="$3" gap="$1.5">
<XStack alignItems="center" justifyContent="space-between">
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
<XStack alignItems="flex-start" justifyContent="space-between" gap="$2" flexWrap="wrap">
<Text fontSize="$sm" fontWeight="700" color={textStrong} flex={1} minWidth={0}>
{addon.label ?? addon.addon_key}
</Text>
<PillBadge tone={status.tone}>{status.text}</PillBadge>
@@ -1271,11 +1271,11 @@ function AddonRow({
{!hideEventLink && eventName ? (
eventPath ? (
<Pressable onPress={() => navigate(eventPath)}>
<XStack alignItems="center" justifyContent="space-between">
<Text fontSize="$xs" color={textStrong} fontWeight="600">
<XStack alignItems="flex-start" justifyContent="space-between" gap="$2" flexWrap="wrap">
<Text fontSize="$xs" color={textStrong} fontWeight="600" flex={1} minWidth={0}>
{eventName}
</Text>
<Text fontSize="$xs" color={primary} fontWeight="700">
<Text fontSize="$xs" color={primary} fontWeight="700" flexShrink={0}>
{t('mobileBilling.openEvent', 'Open event')}
</Text>
</XStack>
@@ -1316,8 +1316,8 @@ function EventAddonRow({ addon }: { addon: EventAddonSummary }) {
return (
<MobileCard borderColor={border} padding="$3" gap="$1.5">
<XStack alignItems="center" justifyContent="space-between">
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
<XStack alignItems="flex-start" justifyContent="space-between" gap="$2" flexWrap="wrap">
<Text fontSize="$sm" fontWeight="700" color={textStrong} flex={1} minWidth={0}>
{addon.label ?? addon.key}
</Text>
<PillBadge tone={status.tone}>{status.text}</PillBadge>