From 6b37ce96f616e1f7929f3a27e7b4c7670faa0285 Mon Sep 17 00:00:00 2001
From: thatmattlove <matt@stunninglyclear.com>
Date: Sat, 1 Jun 2024 15:40:49 -0400
Subject: [PATCH] fix logo alignment on small screens; closes #258

---
 hyperglass/ui/components/header/header.tsx | 8 +++-----
 hyperglass/ui/components/header/title.tsx  | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/hyperglass/ui/components/header/header.tsx b/hyperglass/ui/components/header/header.tsx
index db7dd3bb..b36470a3 100644
--- a/hyperglass/ui/components/header/header.tsx
+++ b/hyperglass/ui/components/header/header.tsx
@@ -1,6 +1,6 @@
 import { Flex, ScaleFade } from '@chakra-ui/react';
 import { motionChakra } from '~/elements';
-import { useBooleanValue, useFormInteractive, useBreakpointValue } from '~/hooks';
+import { useBooleanValue, useBreakpointValue, useFormInteractive } from '~/hooks';
 import { Title } from './title';
 
 const Wrapper = motionChakra('header', {
@@ -16,8 +16,6 @@ export const Header = (): JSX.Element => {
     { base: '75%', lg: '75%' },
   );
 
-  const justify = useBreakpointValue({ base: 'flex-start', lg: 'center' });
-
   return (
     <Wrapper layout="position">
       <ScaleFade in initialScale={0.5} style={{ width: '100%' }}>
@@ -25,8 +23,8 @@ export const Header = (): JSX.Element => {
           height="100%"
           maxW={titleWidth}
           // This is here for the logo
-          justifyContent={justify}
-          mx={{ base: formInteractive ? 'auto' : 0, lg: 'auto' }}
+          justifyContent="center"
+          mx="auto"
         >
           <Title />
         </Flex>
diff --git a/hyperglass/ui/components/header/title.tsx b/hyperglass/ui/components/header/title.tsx
index a4f10200..57331a33 100644
--- a/hyperglass/ui/components/header/title.tsx
+++ b/hyperglass/ui/components/header/title.tsx
@@ -46,7 +46,7 @@ const DWrapper = (props: DWrapperProps): JSX.Element => {
       animate={formInteractive}
       transition={{ damping: 15, type: 'spring', stiffness: 100 }}
       variants={{ results: { scale: 0.5 }, form: { scale: 1 } }}
-      maxWidth="25%"
+      maxWidth="75%"
       {...props}
     />
   );