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} /> );