diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index f540f3d8e..53257fae1 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -411,7 +411,7 @@ } } - .cards:not(.is-collapsed) & { + .cards.is-expanded & { inline-size: 100%; justify-content: center; } @@ -421,7 +421,7 @@ line-height: var(--column-width-collapsed); inline-size: var(--column-width-collapsed); - .cards:not(.is-collapsed) & { + .cards.is-expanded & { display: none; } } @@ -439,7 +439,7 @@ writing-mode: vertical-rl; } - .cards:not(.is-collapsed) & { + .cards.is-expanded & { align-items: center; display: flex; gap: 0.25ch; @@ -458,7 +458,7 @@ display: none; } - .cards:not(.is-collapsed) .cards__expander:hover & { + .cards.is-expanded .cards__expander:hover & { opacity: 0.66; scale: 1; } diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js index e9974b0ce..806e70c76 100644 --- a/app/javascript/controllers/collapsible_columns_controller.js +++ b/app/javascript/controllers/collapsible_columns_controller.js @@ -110,6 +110,10 @@ export default class extends Controller { column.classList.remove(this.collapsedClass) column.classList.add(this.expandedClass) localStorage.setItem(key, true) + + if (window.matchMedia('(max-width: 639px)').matches) { + column.scrollIntoView({ behavior: "smooth", inline: "nearest" }) + } } #buttonFor(column) {