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

42
resources/js/admin/mobile/EventRecapPage.tsx
View File

@@ -200,60 +200,72 @@ export default function MobileEventRecapPage() {
orientation="horizontal"
flexDirection="column"
>
<Tabs.List gap="$2">
<Tabs.List gap="$1" flexWrap="wrap">
<Tabs.Tab
value="overview"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
flexGrow={1}
flexShrink={1}
flexBasis="calc(33.333% - 4px)"
minWidth={108}
paddingVertical="$2"
paddingHorizontal="$2"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontSize="$xs"
fontWeight={activeTab === 'overview' ? '700' : '600'}
color={activeTab === 'overview' ? text : muted}
textAlign="center"
numberOfLines={2}
>
{t('events.recap.tabs.overview', 'Overview')}
</Text>
</Tabs.Tab>
<Tabs.Tab
value="engagement"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
flexGrow={1}
flexShrink={1}
flexBasis="calc(33.333% - 4px)"
minWidth={108}
paddingVertical="$2"
paddingHorizontal="$2"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontSize="$xs"
fontWeight={activeTab === 'engagement' ? '700' : '600'}
color={activeTab === 'engagement' ? text : muted}
textAlign="center"
numberOfLines={2}
>
{t('events.recap.tabs.engagement', 'Engagement')}
</Text>
</Tabs.Tab>
<Tabs.Tab
value="compliance"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
flexGrow={1}
flexShrink={1}
flexBasis="calc(33.333% - 4px)"
minWidth={108}
paddingVertical="$2"
paddingHorizontal="$2"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontSize="$xs"
fontWeight={activeTab === 'compliance' ? '700' : '600'}
color={activeTab === 'compliance' ? text : muted}
textAlign="center"
numberOfLines={2}
>
{t('events.recap.tabs.compliance', 'Compliance')}
</Text>
@@ -263,8 +275,8 @@ export default function MobileEventRecapPage() {
<Tabs.Content value="overview" paddingTop="$2">
<YStack gap="$4">
<MobileCard gap="$3">
<XStack alignItems="center" justifyContent="space-between">
<YStack gap="$1">
<XStack alignItems="flex-start" justifyContent="space-between" gap="$2" flexWrap="wrap">
<YStack gap="$1" flex={1} minWidth={0}>
<Text fontSize="$xl" fontWeight="800" color={textStrong}>
{t('events.recap.completedTitle', 'Event abgeschlossen')}
</Text>