From 8f9f1a14de182815f9212eaa77c22d3601e158e5 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 31 Aug 2020 23:54:54 -0700
Subject: [PATCH] better NC badge, with name text wrapping

a bit unfortunate to be wrapping long item names on mobile now, but heck there's an info button, should be fine
---
 src/app/WardrobePage/Item.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/app/WardrobePage/Item.js b/src/app/WardrobePage/Item.js
index f3decac..2009c76 100644
--- a/src/app/WardrobePage/Item.js
+++ b/src/app/WardrobePage/Item.js
@@ -51,16 +51,11 @@ function Item({ item, itemNameId, isWorn, isInOutfit, dispatchToOutfit }) {
             isWorn={isWorn}
           />
         </Box>
-        <Box
-          flex="1 1 auto"
-          display="flex"
-          flexDirection="row"
-          alignItems="center"
-        >
-          <ItemName id={itemNameId} isWorn={isWorn} marginRight="2">
+        <Box flex="1 1 0" minWidth="0">
+          <ItemName id={itemNameId} isWorn={isWorn}>
             {item.name}
           </ItemName>
-          {item.isNc && <Badge colorScheme="cyan">NC</Badge>}
+          <Box>{item.isNc && <Badge colorScheme="cyan">NC</Badge>}</Box>
         </Box>
         <Box flex="0 0 auto">
           <SupportOnly>
@@ -237,6 +232,9 @@ function ItemName({ children, ...props }) {
     <Box
       fontSize="md"
       transition="all 0.15s"
+      overflow="hidden"
+      whiteSpace="nowrap"
+      textOverflow="ellipsis"
       className={css`
         ${containerHasFocus} {
           opacity: 0.9;