admin mobile: improve small-screen readability across checklist, tabs, badges, and headers
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user