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)
This commit is contained in:
Emi Matchu 2020-08-04 22:48:14 -07:00
parent f18ddc1385
commit 7bddb7f67e

View file

@ -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 />}