refresh layer support icon, always show on mobile

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -277,7 +277,6 @@ function ItemSupportAppearanceLayer({
       width="150px"
       textAlign="center"
       fontSize="xs"
-      position="relative"
       onClick={onOpen}
     >
       <Box
@@ -286,26 +285,31 @@ function ItemSupportAppearanceLayer({
         marginBottom="1"
         boxShadow="md"
         borderRadius="md"
+        position="relative"
       >
         <OutfitLayers visibleLayers={[...biologyLayers, itemLayer]} />
-      </Box>
-      <Box fontWeight="bold">{itemLayer.zone.label}</Box>
-      <Box>Zone ID: {itemLayer.zone.id}</Box>
-      <Box>DTI ID: {itemLayer.id}</Box>
         <Box
           className={css`
             opacity: 0;
             transition: opacity 0.2s;
 
-          button:hover > &,
+            button:hover &,
-          button:focus > & {
+            button:focus & {
+              opacity: 1;
+            }
+
+            /* On touch devices, always show the icon, to clarify that this is
+             * an interactable object! (Whereas I expect other devices to
+             * discover things by exploratory hover or focus!) */
+            @media (hover: none) {
               opacity: 1;
             }
           `}
-        background="rgba(255, 255, 255, 0.8)"
+          background="green.100"
           borderRadius="full"
+          boxShadow="sm"
           position="absolute"
-        top="2"
+          bottom="2"
           right="2"
           padding="2"
           alignItems="center"
@@ -313,8 +317,17 @@ function ItemSupportAppearanceLayer({
           width="32px"
           height="32px"
         >
-        <EditIcon boxSize="16px" position="relative" top="-2px" right="-1px" />
+          <EditIcon
+            boxSize="16px"
+            position="relative"
+            top="-2px"
+            right="-1px"
+          />
         </Box>
+      </Box>
+      <Box fontWeight="bold">{itemLayer.zone.label}</Box>
+      <Box>Zone ID: {itemLayer.zone.id}</Box>
+      <Box>DTI ID: {itemLayer.id}</Box>
       <ItemLayerSupportModal
         item={item}
         itemLayer={itemLayer}