Horizontal column picker

... in card perma

app/assets/stylesheets/card-perma.css

@@ -90,9 +90,20 @@
       @media (max-width: 639px) {
         border: 1px solid var(--card-color);
         border-radius: 0.25em;
-        overflow: hidden;
+        flex-direction: row;
+        gap: 0;
+        overflow: auto;
         max-inline-size: 100%;
         padding: 0;
+        position: relative;
+
+        & > form {
+          max-inline-size: 25ch;
+        }
+
+        & > form + form:not(:has(.card__column-name--current)) {
+          box-shadow: -1px 0 0 0 var(--color-container);
+        }
       }
     }
 

app/helpers/columns_helper.rb

@@ -6,8 +6,8 @@ module ColumnsHelper
       method: :post,
       class: [ "card__column-name btn", { "card__column-name--current": column == card.column && card.open? } ],
       style: "--column-color: #{column.color}",
-      form_class: "flex align-center gap-half",
-      data: { turbo_frame: "_top" }
+      form_class: "flex gap-half",
+      data: { turbo_frame: "_top", scroll_to_target: column == card.column && card.open? ? "target" : nil }
   end
 
   def column_tag(id:, name:, drop_url:, collapsed: true, selected: nil, card_color: "var(--color-card-default)", data: {}, **properties, &block)

app/javascript/controllers/scroll_to_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "target" ]
+
+  connect() {
+    this.#scrollTargetIntoView()
+  }
+
+  #scrollTargetIntoView() {
+    if(this.hasTargetTarget) {
+      this.element.scrollTo({
+        top: this.targetTarget.offsetTop - this.element.offsetHeight / 2 + this.targetTarget.offsetHeight / 2,
+        left: this.targetTarget.offsetLeft - this.element.offsetWidth / 2 + this.targetTarget.offsetWidth / 2,
+        behavior: "instant"
+      })
+    }
+  }
+}

app/views/cards/columns/edit.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag @card, :columns do %>
-  <div class="card__stages" role="radiogroup">
+  <div class="card__stages" role="radiogroup" data-controller="scroll-to">
     <legend class="for-screen-reader">Choose a column for this card</legend>
 
     <%= button_to "Not now", card_not_now_path(@card),
@@ -7,14 +7,16 @@
         style: "--column-color: var(--color-card-complete)",
         role: "radio",
         aria: { checked: @card.postponed? },
-        form_class: "flex align-center gap-half" %>
+        data: { scroll_to_target: @card.postponed? ? "target" : nil },
+        form_class: "flex gap-half" %>
 
     <%= button_to "Maybe?", card_triage_path(@card), method: :delete,
         class: [ "card__column-name card__column-name--stream btn", { "card__column-name--current": @card.awaiting_triage? } ],
           style: "--column-color: var(--color-card-default)",
         role: "radio",
         aria: { checked: @card.awaiting_triage? },
-        form_class: "flex align-center gap-half" %>
+        data: { scroll_to_target: @card.awaiting_triage? ? "target" : nil },
+        form_class: "flex gap-half" %>
 
     <% @columns.each do |column| %>
       <%= button_to_set_column @card, column %>
@@ -25,6 +27,7 @@
         style: "--column-color: var(--color-card-complete)",
         role: "radio",
         aria: { checked: @card.closed? },
-        form_class: "flex align-center gap-half" %>
+        data: { scroll_to_target: @card.closed? ? "target" : nil },
+        form_class: "flex gap-half" %>
   </div>
 <% end %>