From aee27e94c9b489f107e2f190dd40fc4cf780a70c Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 18 Apr 2023 01:25:53 +1200
Subject: [PATCH] fix(ui): Fix site header on really small screens

---
 .../features/system/components/SiteHeader.tsx    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
index 3216210501..f407206b67 100644
--- a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
@@ -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}