From ab88f5549ec24a75362cf25dca67e87b6ed8b570 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 8 Apr 2025 16:09:53 -0500
Subject: [PATCH] Working with longer text

---
 app/assets/stylesheets/expander.css    | 28 ++++++++++++++++++++++++++
 app/views/bubbles/_pop_toggle.html.erb |  2 +-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css
index 6a649b4bc..d985d20ce 100644
--- a/app/assets/stylesheets/expander.css
+++ b/app/assets/stylesheets/expander.css
@@ -19,11 +19,20 @@
   cursor: pointer;
   display: flex;
   inline-size: var(--expander-width);
+  justify-content: flex-start;
   padding-inline: 1.5ch;
   position: relative;
   white-space: nowrap;
   z-index: 1;
 
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  [open] & {
+    box-shadow: none;
+  }
+
   .icon {
     font-size: 1ch;
   }
@@ -32,7 +41,10 @@
 .expander__content {
   --btn-border-radius: var(--expander-radius);
 
+  align-items: stretch;
   border-radius: var(--expander-radius);
+  flex-direction: column;
+  gap: 0;
   padding-block-start: var(--expander-height);
 }
 
@@ -71,5 +83,21 @@
 }
 
 .expander__item {
+  --btn-background: transparent;
+  --btn-border-radius: 0.3em;
+  --btn-border-size: 0;
+  --btn-font-weight: 500;
+  --btn-padding: var(--inline-space-half) var(--inline-space);
+  --hover-size: 0;
+  --outline-color: transparent;
+
+  inline-size: calc(100% + var(--inline-space) * 2);
+  margin-inline-start: calc(-1 * var(--inline-space));
+  justify-content: flex-start;
   white-space: nowrap;
+
+  &:hover,
+  &:focus-visible {
+    background-color: oklch(var(--lch-white) / 15%);
+  }
 }
diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb
index 52c8ba23f..f61984e65 100644
--- a/app/views/bubbles/_pop_toggle.html.erb
+++ b/app/views/bubbles/_pop_toggle.html.erb
@@ -17,7 +17,7 @@
             <%= button_to bubble_pop_path(bubble, reason: label), class: "expander__item btn" do %>
               <span class="overflow-ellipsis"><%= label %></span>
             <% end %>
-            <button class="expander__item btn" hidden>
+            <button class="expander__item btn" >
               <span class="overflow-ellipsis">Something with a really long title here</span>
             </button>
           <% end %>