diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 46d2cb498..14b7e3a5e 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -177,7 +177,7 @@
.cards__transition-container {
block-size: 100%;
border-radius: calc(var(--column-width-collapsed) / 2);
- translate: 0;
+ translate: 0 0.5ch; // Allow a little room for the mini bubble */
transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle);
@media (min-width: 640px) {
@@ -229,10 +229,6 @@
}
}
- .cards--grid & {
- display: contents;
- }
-
[aria-selected] & .card[aria-selected] {
outline: var(--focus-ring-size) solid var(--color-selected-dark);
outline-offset: var(--focus-ring-offset);
@@ -270,14 +266,17 @@
--cards-gap: 1rem;
--card-grid-columns: 1;
+ align-items: start;
container-type: inline-size;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--cards-gap);
justify-content: center;
+ inline-size: 100%;
margin-inline: auto;
max-inline-size: var(--main-width);
+ padding-inline: 1ch;
@media (min-width: 640px) {
--card-grid-columns: 2;
@@ -287,6 +286,10 @@
--card-grid-columns: 3;
}
+ .cards__list {
+ display: contents;
+ }
+
.card {
inline-size: calc((100% - var(--cards-gap) * (var(--card-grid-columns) - 1) ) / var(--card-grid-columns));
}
@@ -633,6 +636,10 @@
inline-size: auto;
text-align: center;
+ @media (min-width: 800px) {
+ margin-inline: var(--column-padding);
+ }
+
&:has(dialog[open]) {
z-index: 5;
}
diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index b283fa447..800e1b31b 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -7,11 +7,11 @@
align-items: center;
display: flex;
flex-wrap: wrap;
- gap: 1ch;
gap: var(--inline-space-half);
justify-content: center;
+ padding-block-start: 2px; /* prevents input focus-ring clipping on mobile */
position: relative;
- view-transition-name: "filters";
+ view-transition-name: filters;
.btn {
--btn-border-color: var(--color-ink-medium);
diff --git a/app/helpers/columns_helper.rb b/app/helpers/columns_helper.rb
index b14e6adc6..6b9459c52 100644
--- a/app/helpers/columns_helper.rb
+++ b/app/helpers/columns_helper.rb
@@ -11,7 +11,7 @@ module ColumnsHelper
end
def column_tag(id:, name:, drop_url:, collapsed: true, selected: nil, card_color: "var(--color-card-default)", data: {}, **properties, &block)
- classes = token_list("cards", properties.delete(:class), "is-collapsed": collapsed)
+ classes = token_list("cards", properties.delete(:class), "is-collapsed": collapsed, "is-expanded": !collapsed)
hotkeys_disabled = data[:card_hotkeys_disabled]
data = {
diff --git a/app/views/boards/show/_filtered_cards.html.erb b/app/views/boards/show/_filtered_cards.html.erb
index 5cfcd39b7..4e4d8f749 100644
--- a/app/views/boards/show/_filtered_cards.html.erb
+++ b/app/views/boards/show/_filtered_cards.html.erb
@@ -1,6 +1,8 @@