Template:Hlist/styles.css

/* flex + flex-wrap, not display:inline &mdash; confirmed live that plain
   inline <li>s with no whitespace text node between them (the dot's
   spacing comes from CSS margin now, not a literal space &mdash; see
   _gen_hlist.py) never got a line-break opportunity between items at
   all, so a long list just overflowed its cell/table width instead of
   wrapping (this was the direct cause of a table needing horizontal
   scroll to show a 6-name row). Flex items wrap regardless of markup
   whitespace, so this fixes it without bringing the space-collapsing
   problem back.
   inline-flex, not flex &mdash; a block-level flex container always
   starts on its own line, which forced the list onto a new row when
   used right after other inline text (e.g. a bold "Slicer:" label on
   Promotions). inline-flex keeps the same wrapping behaviour for the
   items inside while letting the list itself flow inline. */
.loka-hlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
}

.loka-hlist-sep {
	margin: 0 .3em;
}

/* Hides the separator dot (and its margins) on whichever item ends up
   first (the dot itself lives in the template's own HTML output, not
   here &mdash; see the comment in _gen_hlist.py for why). */
.loka-hlist li:first-child .loka-hlist-sep {
	display: none;
}

.loka-hlist--stacked {
	flex-direction: column;
}

.loka-hlist--stacked .loka-hlist-sep {
	display: none;
}