From fa6f54b5ffc008a13b43826444ebb3e9707fb0c5 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 3 Dec 2025 10:40:35 -0600
Subject: [PATCH] Better mini-bubble position for the Maybe column

---
 app/assets/stylesheets/card-columns.css | 53 +++++++++++++------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 3b2faca60..8b2e373ff 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -682,38 +682,39 @@
   /* -------------------------------------------------------------------------- */
 
   /* Surface a mini bubble if there are cards with bubbles inside */
-  .cards--considering:has(.bubble:not([hidden])),
-  .cards--doing.is-collapsed:has(.bubble:not([hidden])) {
-    .cards__transition-container {
-      --bubble-color: var(--card-color, oklch(var(--lch-blue-medium)));
-      --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
+  .cards--considering:has(.bubble:not([hidden])) .cards__expander-title,
+  .cards--doing.is-collapsed:has(.bubble:not([hidden])) .cards__transition-container {
+    --bubble-color: var(--card-color, oklch(var(--lch-blue-medium)));
+    --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
+
+    &:before {
+      background: radial-gradient(
+        color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%,
+        color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100%
+      );
+      block-size: 1em;
+      border-radius: var(--bubble-shape);
+      content: "";
+      inline-size: 1em;
+      inset: 0 0 auto auto;
+      position: absolute;
+      translate: 20% -20%;
+      z-index: 1;
+    }
+
+    /* Maybe column: position bubble relative to the title, not the container */
+    .cards--considering & {
+      overflow: visible;
+      position: relative;
 
       &:before {
-        background: radial-gradient(
-          color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%,
-          color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100%
-        );
-        block-size: 1em;
-        border-radius: var(--bubble-shape);
-        content: "";
-        inline-size: 1em;
-        inset: 0 0 auto auto;
-        position: absolute;
-        translate: 20% -20%;
-        z-index: 1;
-      }
-
-      .cards--considering &:before {
-        inset: 0 auto auto 0;
-        translate: 100% 75%;
+        inset-block-start: 50%;
+        translate: 125% -75%;
+        z-index: -1;
       }
     }
   }
 
-  .cards--considering:has(.bubble:not([hidden])) .cards__expander-title:before {
-    translate: 120% 50%;
-  }
-
   /* Card column indicators
   /* -------------------------------------------------------------------------- */