From 7421f41e5876288e8de38473251d5a25d494da8d Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 12 Feb 2021 17:46:33 -0800
Subject: [PATCH] Move HTML5Badge to zones area

---
 src/app/ItemPage.js              | 30 ++++++++++++++++--------------
 src/app/components/HTML5Badge.js |  2 +-
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index a28ecd3..07aca39 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -756,18 +756,7 @@ function ItemPageOutfitPreview({ itemId }) {
           // This box grows at the same rate as the box on the right, so the
           // middle box will be centered, if there's space!
           flex="1 0 0"
-          display="flex"
-          justifyContent="center"
-          paddingRight="2"
-        >
-          <HTML5Badge
-            usesHTML5={usesHTML5}
-            // If we're not compatible, act the same as if we're loading:
-            // don't change the badge, but don't show one yet if we don't
-            // have one yet.
-            isLoading={appearance.loading || !isCompatible}
-          />
-        </Box>
+        />
         <SpeciesColorPicker
           speciesId={petState.speciesId}
           colorId={petState.colorId}
@@ -840,13 +829,26 @@ function ItemPageOutfitPreview({ itemId }) {
           isLoading={loadingGQL || loadingValids}
         />
       </Box>
-      <Box gridArea="zones" alignSelf="center" justifySelf="center">
+      <Flex gridArea="zones" justifySelf="center" align="center">
         {compatibleBodiesAndTheirZones.length > 0 && (
           <ItemZonesInfo
             compatibleBodiesAndTheirZones={compatibleBodiesAndTheirZones}
           />
         )}
-      </Box>
+        <Box width="4" />
+        <Flex
+          // Avoid layout shift while loading
+          minWidth="54px"
+        >
+          <HTML5Badge
+            usesHTML5={usesHTML5}
+            // If we're not compatible, act the same as if we're loading:
+            // don't change the badge, but don't show one yet if we don't
+            // have one yet.
+            isLoading={appearance.loading || !isCompatible}
+          />
+        </Flex>
+      </Flex>
     </Grid>
   );
 }
diff --git a/src/app/components/HTML5Badge.js b/src/app/components/HTML5Badge.js
index 438116b..0aaf0bb 100644
--- a/src/app/components/HTML5Badge.js
+++ b/src/app/components/HTML5Badge.js
@@ -99,7 +99,7 @@ function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
     <Tooltip
       textAlign="center"
       fontSize="xs"
-      placement="bottom-start"
+      placement="top"
       label={tooltipLabel}
       // HACK: Chakra tooltips seem inconsistent about staying open when focus
       //       comes from touch events. But I really want this one to work on