Simplify bucket display

app/assets/stylesheets/buckets.css

@@ -8,6 +8,12 @@
   padding: var(--gap);
 }
 
+.bucket__edit-btn {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+}
+
 .bucket__windshield {
   --border-radius: 1.5em;
 
@@ -17,14 +23,7 @@
 }
 
 .windshield__container {
-  aspect-ratio: 16 / 9;
+  aspect-ratio: 18 / 9;
   container-type: inline-size;
   inline-size: 40ch;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-selected);
-      border-color: var(--color-selected-dark);
-    }
-  }
 }

app/views/buckets/index.html.erb

@@ -16,9 +16,10 @@
 
 <menu class="buckets margin-none unpad align-center justify-center flex flex-wrap gap">
   <% @buckets.each do |bucket| %>
-    <li class="bucket flex flex-column txt-align-center gap-half max-width">
-      <%= link_to bucket_bubbles_path(bucket), class: "windshield__container border-radius border flex justify-center align-center position-relative" do %>
+    <li class="bucket flex flex-column txt-align-center max-width position-relative">
+      <%= link_to bucket_bubbles_path(bucket), class: "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.not_popped.left_joins(:comments, :boosts).group(:id).order(Arel.sql("COUNT(comments.id) + COUNT(boosts.id) DESC")).limit(10).each do |bubble| %>
             <div class="bubble" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>">
               <svg class="bubble__svg" style="fill: <%= bubble.color %>; stroke: <%= bubble.color %>;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
@@ -29,8 +30,8 @@
           <% end %>
         </div>
       <% end %>
-      <div class="flex align-center gap-half center">
-        <strong><%= link_to bucket.name, bucket_bubbles_path(bucket), class: "txt-large txt-ink" %></strong>
+      <div class="flex align-center justify-center flex-column gap-half center">
+        <strong><%= link_to bucket.name, bucket_bubbles_path(bucket), class: "txt-x-large txt-ink" %></strong>
 
         <%= link_to edit_bucket_path(bucket), class: "btn txt-small" do %>
           <%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>