move title to center when submitting on mobile

hyperglass/ui/components/header/header.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { Flex, ScaleFade } from '@chakra-ui/react';
+import { AnimatedDiv } from '~/components';
 import { useColorValue, useBreakpointValue } from '~/context';
 import { useBooleanValue, useLGState } from '~/hooks';
 import { Title } from './title';
@@ -36,15 +37,17 @@ export const Header = (props: THeader) => {
       color="gray.500"
       {...rest}>
       <ScaleFade in initialScale={0.5} style={{ width: '100%' }}>
-        <Flex
+        <AnimatedDiv
+          layout
           height="100%"
+          display="flex"
           ref={titleRef}
           maxW={titleWidth}
           // This is here for the logo
           justifyContent={justify}
-          mx={{ base: 0, lg: 'auto' }}>
+          mx={{ base: isSubmitting.value ? 'auto' : 0, lg: 'auto' }}>
           <Title />
-        </Flex>
+        </AnimatedDiv>
       </ScaleFade>
     </Flex>
   );

hyperglass/ui/components/header/title.tsx

@@ -8,14 +8,24 @@ import { TitleOnly } from './titleOnly';
 import { SubtitleOnly } from './subtitleOnly';
 
 import type { StackProps } from '@chakra-ui/react';
-import type { TTitle, TTitleWrapper, TDWrapper } from './types';
+import type { TTitle, TTitleWrapper, TDWrapper, TMWrapper } from './types';
 
 const AnimatedVStack = motion.custom(VStack);
 
 /**
  * Title wrapper for mobile devices, breakpoints sm & md.
  */
-const MWrapper = (props: StackProps) => <VStack spacing={1} alignItems="flex-start" {...props} />;
+const MWrapper = (props: TMWrapper) => {
+  const { isSubmitting } = useLGState();
+  return (
+    <AnimatedVStack
+      layout
+      spacing={1}
+      alignItems={isSubmitting.value ? 'center' : 'flex-start'}
+      {...props}
+    />
+  );
+};
 
 /**
  * Title wrapper for desktop devices, breakpoints lg & xl.

hyperglass/ui/components/header/types.ts

@@ -13,6 +13,8 @@ export type THeaderLayout = {
 };
 export type TDWrapper = Omit<StackProps, 'transition'> & MotionProps;
 
+export type TMWrapper = Omit<StackProps, 'transition'> & MotionProps;
+
 export interface TTitle extends FlexProps {}
 
 export interface TTitleOnly extends HeadingProps {}