The "<X> needs to be installed" feature cards (Enable Whitelist, Authelia
Integration, Headscale Integration, …) were rendering with broken
proportions inside narrow form-grid columns: the body squashed into a
~30-char column and the install button stretched vertically as the only
flex item with room to grow.
Switch to a 2-row CSS grid:
┌────────┬──────────────────────────┐
│ icon │ title │ row 1: who is this for
│ │ reason │
├────────┴──────────────────────────┤
│ [ Install <Service> ] │ row 2: full-width fix-it
└───────────────────────────────────┘
icon grid-row 1, col 1
body grid-row 1, col 2
action grid-row 2, col 1 / -1, width 100%
Reads top-to-bottom regardless of how narrow the host column is, so the
Features tab's 3-column grid stops looking broken. The old @media
(max-width: 560px) responsive override is gone — the grid layout works
at every width, no breakpoint needed.
Signed-off-by: librelad <librelad@digitalangels.vip>
5cac965d0d