From e6d4c3d13fa2a97c22bdd31a11645a753bd99aaa Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 8 Sep 2025 15:53:20 -0500
Subject: [PATCH] Display bubbles on card permas

---
 app/assets/stylesheets/bubble.css     | 17 ++++++++++++++++-
 app/assets/stylesheets/card-perma.css |  1 +
 app/views/cards/_container.html.erb   |  4 ++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css
index 5e1a66e0d..132e10b84 100644
--- a/app/assets/stylesheets/bubble.css
+++ b/app/assets/stylesheets/bubble.css
@@ -1,6 +1,7 @@
 @layer components {
   .bubble {
     --bubble-color: var(--card-color, oklch(var(--lch-blue-medium)));
+    --bubble-number-max: 26px;
     --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
     --bubble-rotate: 0deg;
     --bubble-size-default: 4rem;
@@ -44,7 +45,7 @@
 
   .bubble__number {
     display: grid;
-    font-size: clamp(10px, 50cqi, 26px); /* FF bug: https://fizzy.37signals.com/5986089/collections/2/cards/1373 */
+    font-size: clamp(10px, 50cqi, var(--bubble-number-max)); /* FF bug: https://fizzy.37signals.com/5986089/collections/2/cards/1373 */
     font-weight: 900;
     inset: 0;
     place-content: center;
@@ -56,5 +57,19 @@
   .bubble--considering {
     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-perma.css b/app/assets/stylesheets/card-perma.css
index 69ead0a22..19138c0de 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -20,6 +20,7 @@
     margin-block-start: 2rem;
     max-inline-size: 100%;
     margin-inline: auto;
+    position: relative;
 
     &:has(.card-perma__star-input:checked) {
       .card {
diff --git a/app/views/cards/_container.html.erb b/app/views/cards/_container.html.erb
index 490eb9e2a..57a5d170e 100644
--- a/app/views/cards/_container.html.erb
+++ b/app/views/cards/_container.html.erb
@@ -28,6 +28,10 @@
         <%= render "cards/display/perma/background", card: card %>
       </footer>
     <% end %>
+
+    <% if card.entropic? %>
+      <%= render "cards/display/preview/bubble", card: card %>
+    <% end %>
   </div>
 
   <% if card.published? %>