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
Show Stats 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 (
<Grid
gridTemplateColumns="auto max-content"
gridTemplateColumns={{ base: 'auto', sm: 'auto max-content' }}
paddingRight={{ base: 10, xl: 0 }}
gap={2}
>
<InvokeAILogoComponent />
<Flex alignItems="center" gap={2}>
<Flex justifyContent={{ base: 'center', sm: 'start' }}>
<InvokeAILogoComponent />
</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}