In many cases, the race menu popups may overflow the page revealing the empty yellow space below the site footer, due to them being too tall. To alleviate this, we may use CSS column layouts.
An early attempt at this using styling on the markup wmlunits produces as of wesnoth/wesnoth@b96dc224d0c7 shows that the idea should work, but it requires major markup changes because of Firefox not supporting the column-span property yet. Without it, short menus tend to look extremely weird if the column count is greater than what the menu should actually need:
It may be possible to instruct wmlunits to annotate popup menus with extra classes to decide how many columns we need, but there's still the problem of the popup label (itself part of the list) being dragged into the first column:
So, preferably, the menu should be reworked as a <div> containing a <div> for a label (like it was already the case for the Language menu, and the elements below in a column-layout list.
In many cases, the race menu popups may overflow the page revealing the empty yellow space below the site footer, due to them being too tall. To alleviate this, we may use CSS column layouts.
An early attempt at this using styling on the markup
wmlunitsproduces as of wesnoth/wesnoth@b96dc224d0c7 shows that the idea should work, but it requires major markup changes because of Firefox not supporting thecolumn-spanproperty yet. Without it, short menus tend to look extremely weird if the column count is greater than what the menu should actually need:It may be possible to instruct wmlunits to annotate popup menus with extra classes to decide how many columns we need, but there's still the problem of the popup label (itself part of the list) being dragged into the first column:
So, preferably, the menu should be reworked as a
<div>containing a<div>for a label (like it was already the case for the Language menu, and the elements below in a column-layout list.