From fa69fd9c548d8a93dfbd445e6be2f41473a6be90 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 18 Sep 2025 13:43:07 -0500
Subject: [PATCH] Drag/drop, add title to the container

---
 app/assets/stylesheets/card-columns.css          | 10 ++++++++++
 app/views/cards/index/engagement/_doing.html.erb |  5 ++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index cc86c5403..6104c75d2 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -98,6 +98,7 @@
     }
 
     .cards__expander {
+      background-color: color-mix(in srgb, var(--card-color) 30%, var(--color-canvas));
       flex-direction: row-reverse;
       gap: 0.5ch;
 
@@ -107,6 +108,12 @@
         flex-direction: column;
         justify-content: start;
       }
+
+      .cards:not(.is-collapsed) & {
+        margin-block-start: calc(var(--cards-gap) * -1.5);
+        margin-inline: calc(var(--cards-gap) * -1);
+        padding: var(--cards-gap);
+      }
     }
 
     .cards__expander-button {
@@ -401,6 +408,9 @@
 
   .cards--doing {
     margin-block: var(--cards-gap);
+    border: var(--inline-space) solid color-mix(in srgb, var(--card-color) 30%, var(--color-canvas));
+    border-radius: 0.2em;
+    box-shadow: var(--shadow);
   
     @media (min-width: 640px) {
       padding-inline: var(--cards-gap);
diff --git a/app/views/cards/index/engagement/_doing.html.erb b/app/views/cards/index/engagement/_doing.html.erb
index d62199465..28504f9e8 100644
--- a/app/views/cards/index/engagement/_doing.html.erb
+++ b/app/views/cards/index/engagement/_doing.html.erb
@@ -1,5 +1,8 @@
 <section id="doing-cards" class="cards cards--doing is-collapsed" style="--card-color: <%= stage.color if defined?(stage) && stage %>"
-    data-controller="toggle-class" data-toggle-class-toggle-class="is-collapsed">
+    data-controller="toggle-class" 
+    data-toggle-class-toggle-class="is-collapsed"
+    data-drag-and-drop-target="container"
+    data-drop-target="doing">
   <% 
     filtered_records = if defined?(stage) && stage
       page.records.select { |card| card.stage == stage }