admin mobile: improve small-screen readability across checklist, tabs, badges, and headers
This commit is contained in:
@@ -583,41 +583,49 @@ export default function MobileProfileAccountPage() {
|
||||
orientation="horizontal"
|
||||
flexDirection="column"
|
||||
>
|
||||
<Tabs.List gap="$2">
|
||||
<Tabs.List gap="$1" flexWrap="wrap">
|
||||
<Tabs.Tab
|
||||
value="account"
|
||||
flex={1}
|
||||
paddingVertical="$2.5"
|
||||
paddingHorizontal="$3"
|
||||
flexGrow={1}
|
||||
flexShrink={1}
|
||||
flexBasis="calc(50% - 4px)"
|
||||
minWidth={132}
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$2"
|
||||
borderRadius="$4"
|
||||
hoverStyle={{ backgroundColor: '$backgroundHover' }}
|
||||
pressStyle={{ backgroundColor: '$backgroundPress' }}
|
||||
activeStyle={{ backgroundColor: '$backgroundPress' }}
|
||||
>
|
||||
<Text
|
||||
fontSize="$sm"
|
||||
fontSize="$xs"
|
||||
fontWeight={activeTab === 'account' ? '700' : '600'}
|
||||
color={activeTab === 'account' ? text : muted}
|
||||
textAlign="center"
|
||||
numberOfLines={2}
|
||||
>
|
||||
{t('profile.tabs.account', 'Account')}
|
||||
</Text>
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
value="branding"
|
||||
flex={1}
|
||||
paddingVertical="$2.5"
|
||||
paddingHorizontal="$3"
|
||||
flexGrow={1}
|
||||
flexShrink={1}
|
||||
flexBasis="calc(50% - 4px)"
|
||||
minWidth={132}
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$2"
|
||||
borderRadius="$4"
|
||||
hoverStyle={{ backgroundColor: '$backgroundHover' }}
|
||||
pressStyle={{ backgroundColor: '$backgroundPress' }}
|
||||
activeStyle={{ backgroundColor: '$backgroundPress' }}
|
||||
>
|
||||
<Text
|
||||
fontSize="$sm"
|
||||
fontSize="$xs"
|
||||
fontWeight={activeTab === 'branding' ? '700' : '600'}
|
||||
color={activeTab === 'branding' ? text : muted}
|
||||
textAlign="center"
|
||||
numberOfLines={2}
|
||||
>
|
||||
{t('profile.tabs.branding', 'Standard-Branding')}
|
||||
</Text>
|
||||
|
||||
Reference in New Issue
Block a user