From 6efd4c8b0e551d8403d54a7e060d858c4f136aa6 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 26 Sep 2025 17:12:09 -0500
Subject: [PATCH] Fix bubble position

---
 app/assets/stylesheets/bubble.css       | 20 --------------------
 app/assets/stylesheets/card-columns.css |  5 +++++
 app/assets/stylesheets/card-perma.css   | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css
index e334b8582..8bcf6f4d6 100644
--- a/app/assets/stylesheets/bubble.css
+++ b/app/assets/stylesheets/bubble.css
@@ -52,24 +52,4 @@
     position: absolute;
     text-align: center;
   }
-
-  .bubble--doing,
-  .bubble--on_deck {
-    inset-inline-start: 100%;
-    translate: -60% -60%;
-
-    .card-perma__bg & {
-      --bubble-number-max: 42px;
-      --bubble-size: 6rem;
-
-      inset: calc(var(--bubble-size) / -4) calc(var(--bubble-size) / 1.5) auto auto;
-      translate: 0 0 !important;
-
-      @media (max-width: 800px) {
-        --bubble-size: 4.5rem;
-
-        inset: calc(var(--bubble-size) / 1.5) 0 auto auto;
-      }
-    }
-  }
 }
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 724a38b4a..36d4748a9 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -329,6 +329,11 @@
       }
     }
 
+    .bubble {
+      inset-inline-start: 100%;
+      translate: -60% -60%;
+    }
+
     @media (any-hover: hover) {
       .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) {
         filter: blur(3px) brightness(1.2);
diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index a68c4dad8..4cfaafc2a 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -91,6 +91,20 @@
       }
     }
 
+    .bubble {
+      --bubble-number-max: 42px;
+      --bubble-size: 6rem;
+
+      inset: calc(var(--bubble-size) / -4) calc(var(--bubble-size) / 1.5) auto auto;
+      translate: 0 0;
+
+      @media (max-width: 800px) {
+        --bubble-size: 4.5rem;
+
+        inset: calc(var(--bubble-size) / 1.5) 0 auto auto;
+      }
+    }
+
     @media (max-width: 800px) {
       --padding-inline: var(--main-padding);