Only use grid layout when centering the Maybe column

app/assets/stylesheets/card-columns.css

@@ -19,9 +19,9 @@
     --progress-max-height: 50dvh;
 
     container-type: inline-size;
-    display: grid;
+    display: flex;
+    justify-content: center;
     gap: var(--column-gap);
-    grid-template-columns: 1fr var(--column-width-expanded) 1fr;
     margin-inline: auto;
     max-inline-size: var(--main-width);
     overflow-x: auto;
@@ -29,37 +29,39 @@
     padding-block-end: var(--column-width-collapsed);
     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 var(--column-width-expanded) auto;
-    }
-
     &:has(.cards) {
       min-block-size: 20lh;
     }
-
-    body:not(.public) & {
-      @media (max-width: 519px) {
-        display: none;
-      }
-    }
   }
 
   .card-columns__left,
   .card-columns__right {
-    align-items: stretch;
-    display: flex;
-    gap: var(--column-gap);
+    display: contents;
   }
 
-  .card-columns__left {
-    justify-content: end;
-    padding-inline-start: var(--column-gap);
-  }
+  /* Center the Maybe? column when all the other columns are collapsed */
+  @media (min-width: 640px) {
+    .card-columns:not(:has(.card-columns__left .is-expanded, .card-columns__right .is-expanded)) {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
 
-  .card-columns__right {
-    justify-content: start;
-    padding-inline-end: var(--column-gap);
+      .card-columns__left,
+      .card-columns__right {
+        align-items: stretch;
+        display: flex;
+        gap: var(--column-gap);
+      }
+
+      .card-columns__left {
+        justify-content: end;
+        padding-inline-start: var(--column-gap);
+      }
+
+      .card-columns__right {
+        justify-content: start;
+        padding-inline-end: var(--column-gap);
+      }
+    }
   }
 
   /* Column
@@ -128,7 +130,7 @@
     translate: 0;
     transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle);
 
-    .is-collapsed:not(.cards--maybe) & {
+    .is-collapsed & {
       translate: 0 var(--column-width-collapsed);
     }
 
@@ -353,11 +355,6 @@
       inline-size: 100%;
       justify-content: center;
     }
-
-    .cards:is(.cards--maybe) &:hover {
-      cursor: unset;
-      filter: none;
-    }
   }
 
   .cards__expander-count {
@@ -382,7 +379,7 @@
       writing-mode: vertical-rl;
     }
 
-    .cards:not(.is-collapsed, .cards--maybe) & {
+    .cards:not(.is-collapsed) & {
       align-items: center;
       display: flex;
       gap: 0.25ch;
@@ -691,7 +688,8 @@
 
       &:before {
         inset-block-start: 50%;
-        translate: 125% -75%;
+        inset-inline-start: 0;
+        translate: -125% -75%;
         z-index: -1;
       }
     }

app/javascript/controllers/collapsible_columns_controller.js

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 import { nextFrame, debounce } from "helpers/timing_helpers";
 
 export default class extends Controller {
-  static classes = [ "collapsed", "noTransitions", "titleNotVisible" ]
+  static classes = [ "collapsed", "expanded", "noTransitions", "titleNotVisible" ]
   static targets = [ "column", "button", "title" ]
   static values = {
     board: String
@@ -89,6 +89,7 @@ export default class extends Controller {
     const key = this.#localStorageKeyFor(column)
 
     this.#buttonFor(column).setAttribute("aria-expanded", "false")
+    column.classList.remove(this.expandedClass)
     column.classList.add(this.collapsedClass)
     localStorage.removeItem(key)
   }
@@ -98,6 +99,7 @@ export default class extends Controller {
 
     this.#buttonFor(column).setAttribute("aria-expanded", "true")
     column.classList.remove(this.collapsedClass)
+    column.classList.add(this.expandedClass)
     localStorage.setItem(key, true)
   }
 

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

@@ -4,6 +4,7 @@
       drag_and_drop_hover_container_class: "drag-and-drop__hover-container",
       collapsible_columns_board_value: board.id,
       collapsible_columns_collapsed_class: "is-collapsed",
+      collapsible_columns_expanded_class: "is-expanded",
       collapsible_columns_no_transitions_class: "no-transitions",
       collapsible_columns_title_not_visible_class: "is-off-screen",
       navigable_list_supports_vertical_navigation_value: false,

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

@@ -1,12 +1,11 @@
-<%= column_tag id: "maybe", name: "Maybe?", drop_url: columns_card_drops_stream_path("__id__"), collapsed: false, selected: "true", class: "cards--maybe" do %>
+<%= column_tag id: "maybe", name: "Maybe?", drop_url: columns_card_drops_stream_path("__id__"), collapsed: false, selected: "true", class: "cards--maybe", data: {
+  drag_and_strum_target: "container",
+  collapsible_columns_target: "column",
+  action: "focus->collapsible-columns#focusOnColumn"
+} do %>
   <header class="cards__header">
-    <div class="cards__expander">
-      <h2 class="cards__expander-title" data-collapsible-columns-target="title">Maybe?</h2>
-    </div>
-    <%= link_to board_columns_stream_path(board), class: "cards__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
-      <%= icon_tag "grid", class: "translucent" %>
-      <span class="for-screen-reader">Expand column</span>
-    <% end %>
+    <%= 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>
   <%= render "columns/show/add_card_button", board: board %>
   <% if page.used? %>