Don't allow line breaks in zone list items

Some looked really bad in the new design, like Jewelled Staff, which was breaking between the words "2 species", making a real bad tooltip target too.

Now, there's no line breaks allowed inside a list item at all! We force it to break between items, instead. (Could have also maybe implemented this with flex wrapping? This seemed like a straighter path, but…)

src/app/ItemPage.js

@@ -1341,11 +1341,19 @@ function ItemZonesInfo({ compatibleBodiesAndTheirZones, restrictedZones }) {
               display="inline"
               _notLast={{ _after: { content: '", "' } }}
             >
-              <ItemZonesInfoListItem
+              <Box
-                zoneLabel={zoneLabel}
+                as="span"
-                bodies={bodies}
+                // Don't wrap any of the list item content. But, by putting
-                showBodyInfo={showBodyInfo}
+                // this in an extra container element, we _do_ allow wrapping
-              />
+                // _between_ list items.
+                whiteSpace="nowrap"
+              >
+                <ItemZonesInfoListItem
+                  zoneLabel={zoneLabel}
+                  bodies={bodies}
+                  showBodyInfo={showBodyInfo}
+                />
+              </Box>
             </Box>
           ))}
         </Box>
@@ -1362,9 +1370,18 @@ function ItemZonesInfo({ compatibleBodiesAndTheirZones, restrictedZones }) {
                 key={zoneLabel}
                 as="li"
                 display="inline"
+                whiteSpace="nowrap"
                 _notLast={{ _after: { content: '", "' } }}
               >
-                {zoneLabel}
+                <Box
+                  as="span"
+                  // Don't wrap any of the list item content. But, by putting
+                  // this in an extra container element, we _do_ allow wrapping
+                  // _between_ list items.
+                  whiteSpace="nowrap"
+                >
+                  {zoneLabel}
+                </Box>
               </Box>
             ))}
           </Box>