Fix mini bubble cropping, filters padding, and grid-style

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;
     }

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);

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 = {

app/views/boards/show/_filtered_cards.html.erb

@@ -1,6 +1,8 @@
 <section class="cards cards--grid">
-  <%= with_automatic_pagination :filtered_cards_paginated_container, page do %>
-    <%= render "cards/display/previews", cards: page.records, draggable: true %>
-  <% end %>
-  <div class="blank-slate blank-slate--empty blank-slate--filters">No cards match this filter</div>
+  <div class="cards__list hide-scrollbar">
+    <%= with_automatic_pagination :filtered_cards_paginated_container, page do %>
+      <%= render "cards/display/previews", cards: page.records, draggable: true %>
+    <% end %>
+    <div class="blank-slate blank-slate--empty blank-slate--filters">No cards match this filter</div>
+  </div>
 </section>

app/views/boards/show/_maybe.html.erb

@@ -7,9 +7,7 @@
     <%= render "boards/show/expander", title: "Maybe?", count: board.cards.awaiting_triage.count, column_id: "maybe" %>
     <%= render "boards/show/menu/maximize", column_path: board_columns_stream_path(board) %>
   </header>
-  <div class="cards__list">
-    <%= render "columns/show/add_card_button", board: board %>
-  </div>
+  <%= render "columns/show/add_card_button", board: board %>
   <div class="cards__list hide-scrollbar" data-drag-drop-item-container>
     <% if page.used? %>
       <%= with_automatic_pagination "maybe", @page do %>