Improve deck list layout on large screens

[fspoettel]

There is a lot of empty space on deck lists on larger screens, we can probably use it more efficiently.

Some discussions revolved around automatically flowing the deck lists into columns, which we might be able to do with CSS grid in some fashion.

[morvael]

Did some research on this (details on the Discord), and (if, and only if) nested lists semantics can be forfeited for better control over presentation, I think using column-count and break-inside CSS attributes could be a nice solution for having flexible column layout, while retaining some kind of meta information via article/section tags or ARIA roles. The problem with nested layouts (of any kind) is that the headers can't be grouped with the first item (and I think that is the goal of nice column layout), because that crosses the nesting boundaries. So it requires changing the approach to producing a flat list of "card boxes" of which some will contain header elements. Otherwise blocking column breaks using break-inside disables this for entire element with whatever it has nested, and results in roughly the original code where things can neatly divide into columns leaving lots of unused space in one of them.

Relevant links: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role

Simple "grouped headers" layout forfeiting nested lists semantics:

<div class="columns">
<div class="nobreak">
  <h4>Category 1</h4>
  <h5>Subcategory A</h5>
  <p>Card</p>
</div>
<div><p>Card</p></div>
<div><p>Card</p></div>
<div><p>Card</p></div>
<div><p>Card</p></div>
<div><p>Card</p></div>
<div class="nobreak">
  <h5>Subcategory B</h5>
  <p>Card</p>
</div>
<div><p>Card</p></div>
<div class="nobreak">
  <h4>Category 2</h4>
  <h5>Subcategory C</h5>
  <p>Card</p>
</div>
<div><p>Card</p></div>
<div class="nobreak">
  <h5>Subcategory D</h5>
  <p>Card</p>
</div>
<div><p>Card</p></div>
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.columns {
  column-count: 2; 
}

.nobreak {
  break-inside: avoid;
}

Sample layout: With one more card added see how Subcategory B moved nicely with its card to next column:

I hope this helps exploring this topic.