From b0f7c10bf9d76ed5abca36f2d4bd42dcf1f3933f Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 5 Nov 2025 10:10:58 -0600
Subject: [PATCH] Apply drag and drop effects to transition container

---
 app/assets/stylesheets/card-columns.css | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 4c4595e6b..1f8c4611e 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -63,15 +63,10 @@
   .cards {
     --column-color: color-mix(in srgb, var(--card-color) 15%, var(--color-canvas));
 
-    border-radius: calc(var(--column-width-collapsed) / 2);
     inline-size: var(--column-width-expanded);
     position: relative;
     scroll-snap-align: start;
 
-    &:not(.is-collapsed) {
-      padding-inline: var(--column-padding-expanded);
-    }
-
     &.is-collapsed {
       inline-size: var(--column-width-collapsed);
 
@@ -82,8 +77,8 @@
     }
 
     &.drag-and-drop__hover-container {
-      --dnd-bg-color: var(--column-color);
-      --dnd-border-color: var(--card-color);
+      --dnd-bg-color: transparent;
+      --dnd-border-color: transparent;
     }
 
     @media (any-hover: hover) {
@@ -96,6 +91,7 @@
 
   .cards__transition-container {
     block-size: 100%;
+    border-radius: calc(var(--column-width-collapsed) / 2);
     translate: 0;
     transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle);
 
@@ -103,6 +99,21 @@
       translate: 0 var(--column-width-collapsed);
     }
 
+    .cards:not(.is-collapsed) & {
+      padding-inline: var(--column-padding-expanded);
+    }
+
+    .drag-and-drop__hover-container & {
+      --dnd-bg-color: var(--column-color);
+      --dnd-border-color: var(--card-color);
+
+      background-color: var(--dnd-bg-color);
+      outline: 2px dashed var(--dnd-border-color);
+      outline-offset: -2px;
+      transition: background-color 200ms;
+      z-index: 1;
+    }
+
     .no-transitions & {
       transition: none;
     }