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

@@ -1340,6 +1340,13 @@ function ItemZonesInfo({ compatibleBodiesAndTheirZones, restrictedZones }) {
               as="li"
               display="inline"
               _notLast={{ _after: { content: '", "' } }}
+            >
+              <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"
               >
                 <ItemZonesInfoListItem
                   zoneLabel={zoneLabel}
@@ -1347,6 +1354,7 @@ function ItemZonesInfo({ compatibleBodiesAndTheirZones, restrictedZones }) {
                   showBodyInfo={showBodyInfo}
                 />
               </Box>
+            </Box>
           ))}
         </Box>
       </Box>
@@ -1362,10 +1370,19 @@ function ItemZonesInfo({ compatibleBodiesAndTheirZones, restrictedZones }) {
                 key={zoneLabel}
                 as="li"
                 display="inline"
+                whiteSpace="nowrap"
                 _notLast={{ _after: { content: '", "' } }}
+              >
+                <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>
         ) : (