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…)
This commit is contained in:
Emi Matchu 2021-02-12 18:25:08 -08:00
parent 7183f0725c
commit 09cc2e6a2b

View file

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