Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
blessedcoolant
2023-04-18 01:25:53 +12:00
parent 695893e1ac
commit aee27e94c9
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
View File

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