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

@@ -335,11 +335,11 @@ export default function MobileEventGuestNotificationsPage() {
<YStack gap="$2">
{history.map((item) => (
<MobileCard key={item.id} gap="$2" borderColor={border}>
<XStack alignItems="center" justifyContent="space-between">
<Text fontSize="$sm" fontWeight="800" color={textStrong}>
<XStack alignItems="flex-start" justifyContent="space-between" gap="$2" flexWrap="wrap">
<Text fontSize="$sm" fontWeight="800" color={textStrong} flex={1} minWidth={0}>
{item.title || t('guestMessages.history.untitled', 'Untitled')}
</Text>
<XStack gap="$1.5" alignItems="center">
<XStack gap="$1.5" alignItems="center" flexWrap="wrap" justifyContent="flex-end">
<PillBadge tone={item.status === 'active' ? 'success' : 'muted'}>
{t(`guestMessages.status.${item.status}`, item.status)}
</PillBadge>
@@ -353,8 +353,8 @@ export default function MobileEventGuestNotificationsPage() {
<Text fontSize="$sm" color={text}>
{item.body ?? t('guestMessages.history.noBody', 'No body provided.')}
</Text>
<XStack alignItems="center" justifyContent="space-between">
<XStack gap="$1.5" alignItems="center">
<XStack alignItems="flex-start" justifyContent="space-between" gap="$2" flexWrap="wrap">
<XStack gap="$1.5" alignItems="center" flexWrap="wrap" flex={1} minWidth={0}>
<PillBadge tone="muted">{t(`guestMessages.type.${item.type}`, item.type)}</PillBadge>
{item.target_identifier ? (
<PillBadge tone="muted">
@@ -376,7 +376,7 @@ export default function MobileEventGuestNotificationsPage() {
</PillBadge>
)}
</XStack>
<Text fontSize="$xs" color={mutedText}>
<Text fontSize="$xs" color={mutedText} flexShrink={0}>
{formatGuestMessageDate(item.created_at, locale)}
</Text>
</XStack>