Try moving the glitch badges to the top

Experiment! Let's see if them being more prominent like this is helpful or annoying 😅

I think this is clunkier in the HTML5 Green Happy Path, but worth it for bringing attention in the error cases.

But I feel like we might tweak this over time!

src/app/WardrobePage/OutfitControls.js

@@ -176,19 +176,24 @@ function OutfitControls({
             <BackButton outfitState={outfitState} />
           </Box>
 
-          <Box
+          <Flex
             gridArea="play-pause"
             // HACK: Better visual centering with other controls
             paddingTop="0.3rem"
+            direction="column"
+            align="center"
           >
-            <HStack spacing="2" align="center" justify="center">
             {showAnimationControls && <PlayPauseButton />}
+            <Box height="2" />
+            <HStack spacing="2" align="center" justify="center">
+              <OutfitHTML5Badge appearance={appearance} />
+              <OutfitKnownGlitchesBadge appearance={appearance} />
               <SettingsButton
                 onLockFocus={onLockFocus}
                 onUnlockFocus={onUnlockFocus}
               />
             </HStack>
-          </Box>
+          </Flex>
           <Stack
             gridArea="sharing"
             alignSelf="flex-end"
@@ -215,11 +220,7 @@ function OutfitControls({
                 paddingRight="3"
                 align="center"
                 justify="flex-end"
-              >
-                <OutfitHTML5Badge appearance={appearance} />
-                <Box width="2" />
-                <OutfitKnownGlitchesBadge appearance={appearance} />
-              </Flex>
+              />
               <Box flex="0 0 auto">
                 <DarkMode>
                   <SpeciesColorPicker

src/app/components/HTML5Badge.js

@@ -120,6 +120,8 @@ export function GlitchBadgeLayout({
         transition="all 0.2s"
         tabIndex="0"
         _focus={{ outline: "none", boxShadow: "outline" }}
+        // For consistency between the HTML5Badge & OutfitKnownGlitchesBadge
+        minHeight="30px"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onFocus={() => setIsFocused(true)}