Remove extra focus outline for SpeciesFacesPicker

Before the tooltips, I thought the focus state wasn't clear enough at a glance, so I added an extra focus outline to the species faces picker area. Now, I think it's clear enough with the species name tooltip popping up!

src/app/ItemPage.js

@@ -718,6 +718,7 @@ function ItemPageOutfitPreview({ itemId }) {
           </Box>
         </Box>
       </VStack>
+      <Box maxWidth="400px">
         <SpeciesFacesPicker
           selectedSpeciesId={petState.speciesId}
           compatibleBodies={compatibleBodies}
@@ -732,6 +733,7 @@ function ItemPageOutfitPreview({ itemId }) {
           }
           isLoading={loading}
         />
+      </Box>
     </Stack>
   );
 }
@@ -801,19 +803,8 @@ function SpeciesFacesPicker({
     a.speciesName.localeCompare(b.speciesName)
   );
 
-  const focusBorderColorValue = useToken("colors", "blue.100");
-
   return (
-    <Box
-      _focusWithin={{
-        boxShadow: `${focusBorderColorValue} 0 0 1px 2px`,
-      }}
-      maxWidth="400px"
-      boxSizing="content-box"
-      padding="2"
-      borderRadius="md"
-      transition="all 0.2s"
-    >
+    <>
       <Wrap
         spacing="0"
         justify="center"
@@ -851,7 +842,7 @@ function SpeciesFacesPicker({
           }
         `}
       />
-    </Box>
+    </>
   );
 }
 
@@ -910,7 +901,7 @@ function SpeciesFaceOption({
         <Tooltip
           label={tooltipLabel}
           placement="top"
-          gutter={-12}
+          gutter={-10}
           // We track hover and focus state manually for the tooltip, so that
           // keyboard nav to switch between options causes the tooltip to
           // follow. (By default, the tooltip appears on the first tab focus,