feat: better branch label

src/app/components/Hero/index.tsx

@@ -43,15 +43,18 @@ export function Hero() {
       >
         <Flex direction="column" align="center" gap="1">
           <Heading size="9" weight="bold" align="center">
+            <Flex
+              align="center"
+              gap={{ initial: '1', xs: '4' }}
+              direction={{ initial: 'column', xs: 'row' }}
+            >
               BlitzKit
               {isBranchNamed && (
-              <>
-                {' '}
-                <Code color="gray" highContrast variant="solid">
+                <Code size="8" color="gray" highContrast variant="outline">
                   {BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH!]}
                 </Code>
-              </>
               )}
+            </Flex>
           </Heading>
 
           {!isBranchNamed && (

src/components/Navbar/index.tsx

@@ -78,15 +78,14 @@ export default function Navbar() {
                 weight="bold"
                 onClick={() => setShowHamburgerMenu(false)}
               >
+                <Flex align="center" gap="1">
                   BlitzKit
                   {isBranchNamed && (
-                  <>
-                    {' '}
-                    <Code color="gray" highContrast variant="solid">
+                    <Code color="gray" size="1" highContrast variant="outline">
                       {BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH!]}
                     </Code>
-                  </>
                   )}
+                </Flex>
               </Link>
             </Flex>