From 12bc2376652bf4cd4d639455a2e688fe65f31aba Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Wed, 17 Dec 2025 11:34:31 +0100
Subject: [PATCH] Horizontal column picker

... in card perma
---
 app/assets/stylesheets/card-perma.css         | 13 ++++++++++++-
 app/helpers/columns_helper.rb                 |  4 ++--
 .../controllers/scroll_to_controller.js       | 19 +++++++++++++++++++
 app/views/cards/columns/edit.html.erb         | 11 +++++++----
 4 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 app/javascript/controllers/scroll_to_controller.js

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index be59dac52..7a249ec62 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/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);
+        }
       }
     }
 
diff --git a/app/helpers/columns_helper.rb b/app/helpers/columns_helper.rb
index 222d41357..8c7bc0c0e 100644
--- a/app/helpers/columns_helper.rb
+++ b/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)
diff --git a/app/javascript/controllers/scroll_to_controller.js b/app/javascript/controllers/scroll_to_controller.js
new file mode 100644
index 000000000..aad761fd8
--- /dev/null
+++ b/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"
+      })
+    }
+  }
+}
diff --git a/app/views/cards/columns/edit.html.erb b/app/views/cards/columns/edit.html.erb
index a2ad2c819..586fac20f 100644
--- a/app/views/cards/columns/edit.html.erb
+++ b/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 %>