From f8f320d76c3f0f2319515fba5b34d92c8047eadd Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 6 Dec 2024 17:21:34 -0600
Subject: [PATCH] Adjust position of settings buttons

---
 app/assets/stylesheets/buckets.css | 5 ++---
 app/views/buckets/_bucket.html.erb | 6 +++---
 app/views/filters/_filter.html.erb | 4 ++--
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/buckets.css b/app/assets/stylesheets/buckets.css
index 976f305d5..eb412bf7a 100644
--- a/app/assets/stylesheets/buckets.css
+++ b/app/assets/stylesheets/buckets.css
@@ -19,10 +19,9 @@
   padding: var(--gap);
 }
 
-.bucket__edit-btn {
+.bucket__button {
   position: absolute;
-  inset-block-end: 0;
-  inset-inline-end: 0;
+  inset: calc((var(--btn-size) * -1) - 2cqi) 1cqi auto auto;
 }
 
 .bucket__windshield {
diff --git a/app/views/buckets/_bucket.html.erb b/app/views/buckets/_bucket.html.erb
index ac6c37231..e0893f351 100644
--- a/app/views/buckets/_bucket.html.erb
+++ b/app/views/buckets/_bucket.html.erb
@@ -1,5 +1,5 @@
 <% cache bucket do %>
-  <li class="bucket flex flex-column txt-align-center max-width position-relative">
+  <li class="bucket flex flex-column txt-align-center max-width">
     <%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "border border-radius margin-block-end-half windshield__container flex justify-center align-center position-relative" do %>
       <div class="windshield bucket__windshield flex flex-wrap gap justify-center align-end" style="view-transition-name: windshield_<%= bucket.id %>">
         <% bucket.bubbles.ordered_by_activity.limit(10).each do |bubble| %>
@@ -10,12 +10,12 @@
       </div>
     <% end %>
 
-    <div class="flex align-center justify-center flex-column flex-wrap center gap-half">
+    <div class="flex align-center justify-center flex-column flex-wrap center gap-half position-relative full-width">
       <%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "txt-ink flex flex-column" do %>
         <strong class="txt-x-large"><%= bucket.name %></strong>
       <% end %>
 
-      <%= link_to edit_bucket_path(bucket), class: "btn txt-small" do %>
+      <%= link_to edit_bucket_path(bucket), class: "btn txt-small bucket__button" do %>
         <%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
         <span class="for-screen-reader">Settings for <%= bucket.name %></span>
       <% end %>
diff --git a/app/views/filters/_filter.html.erb b/app/views/filters/_filter.html.erb
index fbbfca942..b19b749ea 100644
--- a/app/views/filters/_filter.html.erb
+++ b/app/views/filters/_filter.html.erb
@@ -10,11 +10,11 @@
       </div>
     <% end %>
 
-    <div class="flex align-center justify-center flex-column flex-wrap center gap-half">
+    <div class="flex align-center justify-center flex-column flex-wrap center gap-half position-relative full-width">
       <%= link_to bubbles_path(**filter.to_params), class: "txt-ink" do %>
         <strong class="txt-large"><%= image_tag "filter.svg", aria: { hidden: true }, size: 30, class: "flex-inline", style: "vertical-align: bottom" %> <%= filter.summary %></strong>
       <% end %>
-      <%= button_to filter_path(filter), method: :delete, class: "btn txt-small btn--negative", data: { turbo_confirm: "Are you sure you want to delete this filter?" } do %>
+      <%= button_to filter_path(filter), method: :delete, class: "btn txt-small btn--negative bucket__button", data: { turbo_confirm: "Are you sure you want to delete this filter?" } do %>
         <%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
         <span class="for-screen-reader">Delete</span>
       <% end %>