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

@@ -239,10 +239,10 @@ function PackageShopCard({
backgroundColor={isActive ? '$green1' : undefined}
style={{ opacity: isSubdued ? 0.6 : 1 }}
>
<XStack justifyContent="space-between" alignItems="flex-start">
<YStack gap="$1">
<XStack gap="$2" alignItems="center">
<Text fontSize="$lg" fontWeight="800" color={textStrong}>
<XStack justifyContent="space-between" alignItems="flex-start" gap="$2" flexWrap="wrap">
<YStack gap="$1" flex={1} minWidth={0}>
<XStack gap="$2" alignItems="center" flexWrap="wrap">
<Text fontSize="$lg" fontWeight="800" color={textStrong} flexShrink={1}>
{pkg.name}
</Text>
{isRecommended && <PillBadge tone="warning">{t('shop.badges.recommended', 'Recommended')}</PillBadge>}
@@ -255,12 +255,12 @@ function PackageShopCard({
{!isResellerCatalog && isActive ? <PillBadge tone="success">{t('shop.badges.active', 'Active')}</PillBadge> : null}
</XStack>
<XStack gap="$2" alignItems="center">
<XStack gap="$2" alignItems="center" flexWrap="wrap">
<Text fontSize="$md" color={primary} fontWeight="700">
{new Intl.NumberFormat(undefined, { style: 'currency', currency: 'EUR' }).format(pkg.price)}
</Text>
{statusLabel && (
<Text fontSize="$xs" color={muted} fontWeight="600">
<Text fontSize="$xs" color={muted} fontWeight="600" flexShrink={1}>
{statusLabel}
</Text>
)}