fix(ui): Fix site header on really small screens

This commit is contained in:
blessedcoolant 2023-04-18 01:25:53 +12:00
parent 695893e1ac
commit aee27e94c9

View File

@ -20,12 +20,18 @@ const SiteHeader = () => {
return (
<Grid
gridTemplateColumns="auto max-content"
gridTemplateColumns={{ base: 'auto', sm: 'auto max-content' }}
paddingRight={{ base: 10, xl: 0 }}
gap={2}
>
<Flex justifyContent={{ base: 'center', sm: 'start' }}>
<InvokeAILogoComponent />
<Flex alignItems="center" gap={2}>
</Flex>
<Flex
alignItems="center"
gap={2}
justifyContent={{ base: 'center', sm: 'start' }}
>
<StatusIndicator />
<ModelSelect />
@ -48,7 +54,7 @@ const SiteHeader = () => {
<Flex
position="absolute"
right={6}
top={16}
top={{ base: 28, sm: 16 }}
backgroundColor="base.800"
padding={4}
borderRadius={4}