From 7bddb7f67ef20f2f65ef8b65dd10ad7dd6faaea6 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 4 Aug 2020 22:48:14 -0700
Subject: [PATCH] never wrap item action buttons on mobile

The button section was capable of flex-shrinking, and having those wrap pretty much always looks bad imo. Here, we get more precise about the areas and their flex rules, including only letting the name area grow/shrink. (If the screen is too small for the name to wrap further, the panel area container gains a horizontal scrollbar, which feels like a really good compromise imo)
---
 src/app/WardrobePage/Item.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/WardrobePage/Item.js b/src/app/WardrobePage/Item.js
index 48db079..139b7d0 100644
--- a/src/app/WardrobePage/Item.js
+++ b/src/app/WardrobePage/Item.js
@@ -40,20 +40,18 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
   return (
     <>
       <ItemContainer>
-        <Box>
+        <Box flex="0 0 auto" marginRight="3">
           <ItemThumbnail
             src={safeImageUrl(item.thumbnailUrl)}
             isWorn={isWorn}
           />
         </Box>
-        <Box width="3" />
-        <Box>
+        <Box flex="1 1 auto">
           <ItemName id={itemNameId} isWorn={isWorn}>
             {item.name}
           </ItemName>
         </Box>
-        <Box flexGrow="1" />
-        <Box>
+        <Box flex="0 0 auto">
           <SupportOnly>
             <ItemActionButton
               icon={<EditIcon />}