From 09cc2e6a2ba4078e5346b58b8ec88bb3b56b2c2e Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 12 Feb 2021 18:25:08 -0800
Subject: [PATCH] Don't allow line breaks in zone list items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 2e01718..b216429 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -1341,11 +1341,19 @@ function ItemZonesInfo({ compatibleBodiesAndTheirZones, restrictedZones }) {
               display="inline"
               _notLast={{ _after: { content: '", "' } }}
             >
-              <ItemZonesInfoListItem
-                zoneLabel={zoneLabel}
-                bodies={bodies}
-                showBodyInfo={showBodyInfo}
-              />
+              <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}
+                  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>