WIP

app/assets/stylesheets/buttons.css

@@ -193,3 +193,20 @@
     }
   }
 }
+
+
+
+
+
+
+.btn-dialog {
+  .popup {
+    background-color: var(--bubble-color, var(--color-bg));
+    margin-top: var(--btn-size);
+  }
+
+  .popup__item {
+    --btn-background: var(--bubble-color);
+    --btn-color: var(--color-bg);
+  }
+}

app/assets/stylesheets/cards.css

@@ -116,7 +116,6 @@
     margin-block: calc(var(--block-space) * -1) var(--block-space);
     padding: var(--block-space) var(--inline-space-double);
     position: relative;
-    z-index: 0;
 
     &:has(dialog[open]) {
       z-index: 1;

app/views/bubbles/_pop_toggle.html.erb

@@ -6,21 +6,22 @@
     <% end %>
   <% else %>
     <div class="flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-      <button class="btn borderless" data-action="click->dialog#open:stop">
-        <span>Close as…</span>
-      </button>
 
-      <dialog class="popup panel flex-column align-start gap-half fill-white shadow" style="--row-gap: 0.2em;"
-          aria-label="Close as…" aria-description="Close this card and select a reason.."
-          data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
-        <strong class="popup__title margin-block-start-half pad-inline-half">Close as…</strong>
+      <div class="btn-dialog">
+        <button class="btn borderless" data-action="click->dialog#open:stop">
+          <span>Close as…</span>
+        </button>
 
-        <% Current.account.pop_reasons.labels.each do |label| %>
-          <%= button_to bubble_pop_path(bubble, reason: label), class: "btn popup__item full-width", form_class: "full-width" do %>
-            <span class="overflow-ellipsis"><%= label %></span>
+        <dialog class="popup panel flex-column align-start gap-half shadow" style="--row-gap: 0.2em;"
+            aria-label="Close as…" aria-description="Close this card and select a reason.."
+            data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
+          <% Current.account.pop_reasons.labels.each do |label| %>
+            <%= button_to bubble_pop_path(bubble, reason: label), class: "btn popup__item full-width", form_class: "full-width" do %>
+              <span class="overflow-ellipsis"><%= label %></span>
+            <% end %>
           <% end %>
-        <% end %>
-      </dialog>
+        </dialog>
+      </div>
     </div>
 
     <span class="card__pop-message">