diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 6aaacaf8b..0cf3df345 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -749,11 +749,12 @@
   .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%;
+    --bubble-opacity: 50%;
 
     &: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%
+        color-mix(in srgb, var(--bubble-color) calc(var(--bubble-opacity) / 5), var(--color-canvas)) 50%,
+        color-mix(in srgb, var(--bubble-color) var(--bubble-opacity), var(--color-canvas)) 100%
       );
       block-size: 1em;
       border-radius: var(--bubble-shape);
@@ -777,6 +778,22 @@
         z-index: -1;
       }
     }
+
+    @media (max-width: 639px) {
+      &.cards__expander-title:before {
+        display: none;
+      }
+    }
+
+    html[data-theme="dark"] & {
+      --bubble-opacity: 100%;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) & {
+        --bubble-opacity: 100%;
+      }
+    }
   }
 
   /* Card column indicators