Draft UI for pet compatibility rule fields

not wired up to a mutation yet, but it looks pretty!

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -77,6 +77,7 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
             <Box paddingBottom="5">
               <Stack spacing="8">
                 <ItemSupportSpecialColorFields item={item} />
+                <ItemSupportPetCompatibilityRuleFields item={item} />
                 <ItemSupportAppearanceFields item={item} />
               </Stack>
             </Box>
@@ -232,6 +233,22 @@ function ItemSupportSpecialColorFields({ item }) {
   );
 }
 
+function ItemSupportPetCompatibilityRuleFields({ item }) {
+  return (
+    <FormControl>
+      <FormLabel>Pet compatibility rule</FormLabel>
+      <Select>
+        <option>Default: Auto-detect whether this fits all pets</option>
+        <option>Body specific: Always different for each pet body</option>
+      </Select>
+      <FormHelperText>
+        By default, we assume Background-y zones fit all pets the same. When
+        items don't follow that rule, we can override it.
+      </FormHelperText>
+    </FormControl>
+  );
+}
+
 /**
  * NOTE: This component takes `outfitState` from context, rather than as a prop
  *       from its parent, for performance reasons. We want `Item` to memoize