move own/want badges to end of wardrobe items

I saw the short-near-the-front and it just frankly looked awkward? Not sure why I liked it before?

I think this medium at the end of the list is better aesthatically, though it's starting to get a bit messy with the different colors mixed around… but I think there's also a semantic argument that we're keeping the facts about the item together, and the _user-specific_ stuff separate at the end… (putting it at the front would be a good semantic argument too, but I think the NC/NP alignment is too important)

src/app/WardrobePage/Item.js

@@ -229,10 +229,10 @@ function ItemBadges({ item }) {
         // on the additional empty child.
         isMaybeAnimated && isSupportUser && <MaybeAnimatedBadge />
       }
-      {item.currentUserOwnsThis && <YouOwnThisBadge variant="short" />}
-      {item.currentUserWantsThis && <YouWantThisBadge variant="short" />}
       {getZoneBadges(occupiedZones, { variant: "occupies" })}
       {getZoneBadges(restrictedZones, { variant: "restricts" })}
+      {item.currentUserOwnsThis && <YouOwnThisBadge variant="medium" />}
+      {item.currentUserWantsThis && <YouWantThisBadge variant="medium" />}
     </ItemBadgeList>
   );
 }

src/app/components/ItemCard.js

@@ -248,12 +248,15 @@ export function YouOwnThisBadge({ variant = "long" }) {
       minHeight="1.5em"
     >
       <CheckIcon aria-label="Check" />
+      {variant === "medium" && <Box marginLeft="1">Own</Box>}
       {variant === "long" && <Box marginLeft="1">You own this!</Box>}
     </Badge>
   );
 
-  if (variant === "short") {
+  if (variant === "short" || variant === "medium") {
-    badge = <ItemBadgeTooltip label="You own this">{badge}</ItemBadgeTooltip>;
+    badge = (
+      <ItemBadgeTooltip label="You own this item">{badge}</ItemBadgeTooltip>
+    );
   }
 
   return badge;
@@ -268,12 +271,15 @@ export function YouWantThisBadge({ variant = "long" }) {
       minHeight="1.5em"
     >
       <StarIcon aria-label="Star" />
+      {variant === "medium" && <Box marginLeft="1">Want</Box>}
       {variant === "long" && <Box marginLeft="1">You want this!</Box>}
     </Badge>
   );
 
-  if (variant === "short") {
+  if (variant === "short" || variant === "medium") {
-    badge = <ItemBadgeTooltip label="You want this">{badge}</ItemBadgeTooltip>;
+    badge = (
+      <ItemBadgeTooltip label="You want this item">{badge}</ItemBadgeTooltip>
+    );
   }
 
   return badge;