soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

13
resources/js/admin/mobile/components/SetupChecklist.tsx
View File

@@ -39,19 +39,21 @@ export function SetupChecklist({
<YStack>
<Pressable onPress={() => setCollapsed(!collapsed)}>
<YStack padding="$3" paddingVertical="$2.5" gap="$2">
<XStack alignItems="center" justifyContent="space-between">
<XStack alignItems="center" gap="$2">
<XStack alignItems="flex-start" justifyContent="space-between" gap="$2" flexWrap="wrap">
<XStack alignItems="center" gap="$2" flex={1} minWidth={0} flexWrap="wrap">
<Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
{title}
</Text>
{isAllComplete ? (
<CheckCircle2 size={14} color={theme.successText} />
) : (
<PillBadge tone="warning">{t('readiness.pending', 'Noch offen')}</PillBadge>
<XStack flexShrink={0}>
<PillBadge tone="warning">{t('readiness.pending', 'Noch offen')}</PillBadge>
</XStack>
)}
</XStack>
<XStack alignItems="center" gap="$2">
<XStack alignItems="center" justifyContent="flex-end" gap="$2" flexShrink={0}>
<Text fontSize="$xs" color={theme.muted} fontWeight="600">
{completedCount}/{steps.length}
</Text>
@@ -89,7 +91,7 @@ export function SetupChecklist({
backgroundColor={isNext ? theme.surfaceMuted : 'transparent'}
onPress={() => navigate(adminPath(step.targetPath))}
title={
<XStack alignItems="center" gap="$2.5">
<XStack alignItems="flex-start" gap="$2.5" flex={1} minWidth={0}>
{step.isComplete ? (
<CheckCircle2 size={18} color={theme.successText} />
) : isNext ? (
@@ -102,6 +104,7 @@ export function SetupChecklist({
fontWeight={isNext ? '700' : '500'}
color={step.isComplete ? theme.muted : theme.textStrong}
textDecorationLine={step.isComplete ? 'line-through' : 'none'}
flexShrink={1}
>
{step.label}
</Text>