diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 6e499e518..3a8a888c0 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -3,10 +3,6 @@ /* ------------------------------------------------------------------------ */ #main:has(.card-columns) { - padding-inline: 0; - } - - .card-columns { --bubble-size: 3.5rem; --cards-gap: min(1.2cqi, 1.7rem); --column-gap: 8px; @@ -17,21 +13,23 @@ --progress-max-cards: 20; --progress-max-height: 50dvh; - align-items: stretch; + padding-inline: var(--column-gap); + } + + .card-columns { + container-type: inline-size; display: grid; gap: var(--column-gap); grid-template-columns: 1fr var(--column-width-expanded) 1fr; - margin: var(--cards-gap) auto 0; + margin-inline: auto; max-inline-size: var(--main-width); - position: relative; - box-shadow: inset 0 0 0 2px red; - justify-content: start; overflow-x: auto; + position: relative; /* When it has something expanded */ &:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) { - grid-template-columns: auto auto auto; + grid-template-columns: auto var(--column-width-expanded) auto; } &:has(.cards) {