Truncation and alignment

app/helpers/workflows_helper.rb

@@ -4,9 +4,13 @@ module WorkflowsHelper
   end
 
   def button_to_set_stage(bubble, stage)
-    button_to stage.name, bucket_bubble_stagings_path(bubble.bucket, bubble, stage_id: stage),
+    button_to bucket_bubble_stagings_path(bubble.bucket, bubble, stage_id: stage),
       method: :post, class: [ "btn full-width justify-start borderless workflow-stage", { "workflow-stage--current": stage == bubble.stage } ],
       form_class: "flex align-center gap-half",
-      data: { turbo_frame: "_top" }
+      data: { turbo_frame: "_top" } do
+        tag.span class: "overflow-ellipsis" do
+          stage.name
+        end
+      end
   end
 end

app/views/bubbles/show.html.erb

@@ -24,7 +24,7 @@
   </nav>
 <% end %>
 
-<aside class="flex align-start justify-start" style="--bubble-color: <%= @bubble.color %>">
+<aside class="flex align-start justify-start max-width" style="--bubble-color: <%= @bubble.color %>">
   <div class="flex flex-column" style="row-gap: 3px;">
     <%= render "bubbles/color", bubble: @bubble %>
 
@@ -46,9 +46,9 @@
       <% end %>
     <% else %>
       <%= form_with model: @bubble, url: bucket_bubble_path(@bubble.bucket, @bubble), data: { controller: "form" } do |form| %>
-        <label class="btn full-width justify-start borderless">
+        <label class="btn full-width justify-start borderless min-width">
           <%= image_tag "picture-add.svg", aria: { hidden: true }, size: 24 %>
-          <span>Background</span>
+          <span class="overflow-ellipsis">Background</span>
           <%= form.file_field :image, class: "input",
                 accept: "image/png, image/jpeg, image/jpg, image/webp",
                 data: { action: "upload-preview#previewImage form#submit", upload_preview_target: "input" },
@@ -59,25 +59,25 @@
 
     <%= button_to bucket_bubble_boosts_path(@bubble.bucket, @bubble), class: "btn full-width justify-start borderless", data: { turbo_frame: dom_id(@bubble, :boosts) } do %>
       <%= image_tag "thumb-up.svg", aria: { hidden: true }, size: 24 %>
-      <span>Boost</span>
+      <span class="overflow-ellipsis">Boost</span>
     <% end %>
 
     <hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle);" />
     <% unless @bubble.drafted? %>
       <%= render "bubbles/pop_toggle", bubble: @bubble %>
-      <button class="btn full-width justify-start borderless">
+      <button class="btn full-width justify-start borderless min-width">
         <%= image_tag "picture-double.svg", aria: { hidden: true }, size: 24 %>
-        <span>I've seen this</span>
+        <span class="overflow-ellipsis">I’ve seen this</span>
       </button>
     <% end %>
 
 
     <%= button_to bucket_bubble_path(@bubble.bucket, @bubble),
           method: :delete,
-          class: "btn full-width justify-start borderless",
+          class: "btn full-width justify-start borderless min-width",
           data: { turbo_confirm: "Are you sure you want to delete this bubble?" } do %>
       <%= image_tag "trash.svg", aria: { hidden: true }, size: 24 %>
-      <span>Delete</span>
+      <span class="overflow-ellipsis">Delete</span>
     <% end %>
   </div>
 </aside>