Untangle list

app/assets/stylesheets/bubbles.css

@@ -266,14 +266,7 @@
   --divider-offset: 1.2em;
   --hover-size: 0;
 
-  container-type: inline-size;
-  font-size: 1.4cqi;
-  inline-size: min(90ch, 100dvw);
-  max-inline-size: 100dvw;
-
-  @media (max-width: 70ch) {
-    inline-size: 100%;
-  }
+  margin-inline: var(--tray-size);
 
   .bubble {
     order: 0;
@@ -285,8 +278,6 @@
   }
 
   ul {
-    margin-inline: var(--divider-offset);
-
     li {
       border-radius: 0;
       list-style: none;
@@ -391,6 +382,7 @@
 }
 
 .bubble__tag {
+  font-weight: 700;
   max-inline-size: 75cqi;
 }
 

app/assets/stylesheets/trays.css

@@ -1,5 +1,8 @@
+:root {
+  --tray-size: max(20dvw, 18rem);
+}
+
 .tray {
-  --size: 30ch;
   --height: calc(2.81lh + var(--block-space));
 
   background-color: transparent;
@@ -7,7 +10,7 @@
   border-radius: 0.5em;
   display: flex;
   flex-direction: column;
-  inline-size: var(--size);
+  inline-size: var(--tray-size);
   justify-content: end;
   padding: var(--block-space-half) var(--inline-space);
   position: fixed;
@@ -20,7 +23,7 @@
     --z: calc(6 - var(--position));
 
     inset: auto 0 0;
-    inline-size: var(--size);
+    inline-size: var(--tray-size);
     outline: 0;
     pointer-events: none;
     position: absolute;
@@ -113,7 +116,7 @@
   block-size: var(--height);
   display: none;
   inset: auto auto 0;
-  inline-size: var(--size);
+  inline-size: var(--tray-size);
   pointer-events: none;
   position: absolute;
   scale: var(--scale);

app/views/bubbles/index.html.erb

@@ -42,8 +42,8 @@
   <% end %>
 </section>
 
-<section class="bubbles-list unpad-inline center margin-block-start">
-  <ul class="unpad margin-none flex flex-column txt-align-start center"
+<section class="bubbles-list margin-block-start">
+  <ul class="unpad margin-none flex flex-column txt-align-start"
       data-controller="divider"
       data-divider-start-count-value="10"
       data-divider-max-count-value="10"

app/views/bubbles/list/_bubble.html.erb

@@ -36,7 +36,7 @@
       <hr class="separator--horizontal flex-item-grow" aria-hidden="true" style="--border-color: var(--color-subtle-dark); --border-style: dotted" />
     </div>
 
-    <div class="flex gap-half full-width min-width align-center" style="font-size: 0.8em;">
+    <div class="flex gap-half full-width min-width align-center txt-small">
       <span class="overflow-ellipsis"><%= "Added to #{bubble.bucket.name} by #{bubble.creator.name}" %> <%= 
         days = (Date.current - bubble.created_at.to_date).to_i
         case days
@@ -52,7 +52,7 @@
             <span>#</span>
             <% bubble.tags.each_with_index do |tag, index| %>
               <%= link_to bubbles_path(bucket_ids: [ bubble.bucket ], tag_ids: [ tag.id ]),
-                    class: "bubble__tag btn btn--plain fill-transparent min-width", style: "font-weight: 700;", data: { turbo_frame: "_top" } do %>
+                    class: "bubble__tag btn btn--plain fill-transparent min-width", data: { turbo_frame: "_top" } do %>
                 <span class="overflow-ellipsis"><%= tag.title %></span>
               <% end %><%= ", " unless index == bubble.tags.size - 1 %>
             <% end %>
@@ -61,14 +61,9 @@
       <% end %>
 
       <% if bubble.stage %>
-        <div class="flex flex-column max-width min-width flex-item-no-shrink">
-          <% workflow = Current.account.workflows.first %>
-            <div class="flex flex-column txt-uppercase border" style="font-size: 0.8em; --border-color: currentColor; padding: 0.1em 0.4em;">
-            <% workflow.stages.each do |stage| %>
-              <%= button_to_set_stage bubble, stage %>
-            <% end %>
-          </div>
-        </div>
+        <strong class="border txt-tight-lines txt-uppercase txt-xx-small" style="--border-color: currentColor; padding: 0.1em 0.4em;">
+          <%= bubble&.stage&.name %>
+        </strong>
       <% end %>
     </div>
   </div>