Address PR feedback

app/assets/stylesheets/buttons.css

@@ -194,12 +194,3 @@
   }
 }
 
-.btn--dialog {
-  .icon--caret-down {
-    font-size: 1ch;
-  }
-
-  + .popup {
-    margin-top: var(--btn-size);
-  }
-}

app/assets/stylesheets/cards.css

@@ -116,8 +116,9 @@
     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]) {
+    &:has([open]) {
       z-index: 1;
     }
 

app/assets/stylesheets/expander.css

@@ -46,6 +46,10 @@
   flex-direction: column;
   gap: 0;
   padding-block-start: var(--expander-height);
+
+  &:hover {
+    box-shadow: none;
+  }
 }
 
 /* For browsers that support animation */
@@ -56,6 +60,7 @@
     block-size: var(--expander-height);
     border-radius: var(--expander-radius);
     inset: 0 auto auto 0;
+    inline-size: var(--expander-width);
     overflow: clip;
     position: absolute;
     transition: content-visibility var(--expander-duration) allow-discrete, block-size var(--expander-duration), inline-size var(--expander-duration);
@@ -64,12 +69,9 @@
   .expander[open]::details-content {
     block-size: auto;
     inline-size: auto;
-
-    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
   }
 
   .expander__content {
-    inline-size: var(--expander-width);
     min-inline-size: var(--expander-width);
   }
 }
@@ -84,7 +86,6 @@
 
     [open] & {
       block-size: auto;
-      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
       inline-size: auto;
     }
   }
@@ -99,7 +100,7 @@
   --hover-size: 0;
   --outline-color: transparent;
 
-  inline-size: calc(100% + var(--inline-space) * 2);
+  inline-size: calc(100% + var(--inline-space-double));
   margin-inline-start: calc(-1 * var(--inline-space));
   justify-content: flex-start;
   white-space: nowrap;

app/javascript/controllers/details_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "details" ]
+
+  close() {
+    this.detailsTarget.removeAttribute("open")
+  }
+
+  closeOnClickOutside({ target }) {
+    if (!this.element.contains(target)) this.close()
+  }
+}

app/javascript/controllers/expand_btn_controller.js

@@ -1,17 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = [ "dialog", "content" ]
-
-  connect() {
-    const width = this.dialogTarget.offsetWidth;
-  }
-
-  toggle() {
-    const isOpen = this.dialogTarget.open;
-
-    if (!isOpen) {
-      console.log("isOpen");
-    }
-  }
-}

app/views/bubbles/_pop_toggle.html.erb

@@ -5,8 +5,8 @@
       <span>Un-do</span>
     <% end %>
   <% else %>
-    <div class="flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-      <details class="expander">
+    <div class="flex-inline center position-relative">
+      <details class="expander" data-controller="details" data-details-target="details" data-action="keydown.esc->details#close click@document->details#closeOnClickOutside">
         <summary class="expander__button btn borderless">
           Close as
           <%= icon_tag "caret-down" %>