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

49
resources/js/admin/mobile/EventTasksPage.tsx
View File

@@ -1176,31 +1176,45 @@ export default function MobileEventTasksPage() {
borderRadius={16}
borderWidth={1}
borderColor={border}
overflow="hidden"
gap="$0"
overflow="visible"
gap="$1"
flexWrap="wrap"
padding="$1"
>
{[
{ value: 'assigned', label: t('events.tasks.tabs.tasks', 'Tasks') },
{ value: 'library', label: t('events.tasks.tabs.library', 'Task Library') },
{ value: 'emotions', label: t('events.tasks.tabs.emotions', 'Emotions') },
{ value: 'collections', label: t('events.tasks.tabs.collections', 'Collections') },
].map((tab, index, arr) => {
].map((tab) => {
const isActive = activeTab === tab.value;
return (
<Tabs.Tab
key={tab.value}
value={tab.value}
flex={1}
paddingVertical="$2.5"
flexGrow={1}
flexShrink={1}
flexBasis="calc(50% - 4px)"
minWidth={132}
paddingVertical="$2"
paddingHorizontal="$2"
alignItems="center"
justifyContent="center"
borderRightWidth={index === arr.length - 1 ? 0 : 1}
borderRightColor={border}
borderWidth={1}
borderColor={isActive ? withAlpha(primary, 0.45) : border}
borderRadius={12}
backgroundColor={isActive ? withAlpha(primary, 0.12) : surface}
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text fontSize="$sm" fontWeight={isActive ? '700' : '600'} color={isActive ? text : muted}>
<Text
fontSize="$xs"
fontWeight={isActive ? '700' : '600'}
color={isActive ? text : muted}
numberOfLines={2}
textAlign="center"
>
{tab.label}
</Text>
</Tabs.Tab>
@@ -1232,6 +1246,7 @@ export default function MobileEventTasksPage() {
<XStack
alignItems="center"
gap="$1.5"
flexShrink={1}
paddingVertical="$2"
paddingHorizontal="$3"
borderRadius={14}
@@ -1239,14 +1254,16 @@ export default function MobileEventTasksPage() {
borderColor={border}
backgroundColor={surface}
>
<Text fontSize={11} fontWeight="700" color={text}>
{t('events.tasks.emotionFilterShort', 'Emotion')}
</Text>
<Text fontSize={11} color={muted}>
{emotionFilter
? emotions.find((e) => String(e.id) === emotionFilter)?.name ?? t('events.tasks.customEmotion', 'Custom emotion')
: t('events.tasks.allEmotions', 'All')}
</Text>
<YStack flexShrink={1} minWidth={0} maxWidth={128}>
<Text fontSize={11} fontWeight="700" color={text} numberOfLines={1}>
{t('events.tasks.emotionFilterShort', 'Emotion')}
</Text>
<Text fontSize={11} color={muted} numberOfLines={1}>
{emotionFilter
? emotions.find((e) => String(e.id) === emotionFilter)?.name ?? t('events.tasks.customEmotion', 'Custom emotion')
: t('events.tasks.allEmotions', 'All')}
</Text>
</YStack>
<ChevronDown size={14} color={muted} />
</XStack>
</Pressable>