Merge branch 'main' into house

* main:
  Adjust position of settings buttons
  Actually, no need for a max-size, just let it grow
  Improve comment form design
  Same style as combobox pop-ups
  Ensure bubbles are clickable anyplace in windshield
  Deal with truncation in the list layout, too
  Ensure tags don't affect the bubble shape or spill out of the container
  Style pop-up UI for selecting assignments and tags
  Adjust position now that bubbles won't be so vertical
  Fix that bubbles could collapse in some situations
  dep: bump rexml to address dependabot alert
  dep: bump rails to edge

Gemfile

@@ -1,7 +1,7 @@
 source "https://rubygems.org"
 ruby file: ".ruby-version"
 
-gem "rails", ">= 8.0.0.rc1"
+gem "rails", github: "rails/rails", branch: "main"
 
 # Assets & front end
 gem "importmap-rails"

app/assets/stylesheets/bubbles.css

@@ -29,7 +29,6 @@
   color: var(--bubble-color, currentColor);
   container-type: inline-size;
   display: grid;
-  max-inline-size: 100%;
   place-items: center;
   position: relative;
   transition: 0.2s ease;
@@ -119,7 +118,7 @@
   &.bubble__assignee {
     aspect-ratio: 1;
     font-size: 4.5cqi;
-    inset: 6cqb auto auto -2cqi;
+    inset: 6cqb auto auto -5cqi;
     padding: 0.2em;
 
     + & {
@@ -284,6 +283,10 @@
   inset: 0;
   position: absolute;
   z-index: -1;
+
+  .windshield & {
+    z-index: 1;
+  }
 }
 
 .bubble__perma {
@@ -292,15 +295,22 @@
   max-inline-size: 100%;
 }
 
-.bubble__tags{
+.bubble__tags {
+  --row-gap: 0;
+
   font-size: var(--text-small);
   margin-block-start: 0.3cqb;
+  max-inline-size: 75cqi;
 
   .bubble__perma & {
     font-size: var(--text-medium);
   }
 }
 
+.bubble__tag {
+  max-inline-size: 75cqi;
+}
+
 .bubble__title {
   -webkit-line-clamp: var(--lines, 5);
   -webkit-box-orient: vertical;

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 {

app/assets/stylesheets/colors.css

@@ -65,7 +65,9 @@
 }
 
 .color-picker {
+  --panel-border-color: var(--bubble-color);
   --panel-border-radius: 2em;
+  --panel-border-size: 2px;
   --panel-padding: 0.5em 0.7em;
   --panel-size: auto;
 

app/assets/stylesheets/comboboxes.css

@@ -9,12 +9,42 @@
   turbo-frame {
     display: inline;
   }
+}
 
-  .hw-combobox__main__wrapper {
-    background-color: var(--color-ink-reversed);
-  }
+.hw-combobox__input {
+  --hover-size: 0;
 
-  .hw-combobox__input {
-    background-color: var(--color-ink-reversed);
+  min-inline-size: 15ch;
+  padding: 0 calc(var(--hw-handle-offset-right) * 2) 0 0;
+}
+
+.hw-combobox__main__wrapper {
+  --hw-combobox-width: auto;
+
+  accent-color: var(--input-accent-color, var(--color-ink));
+  background-color: var(--input-background, transparent);
+  border-radius: var(--input-border-radius, 0.5em);
+  border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark));
+  color: var(--input-color, var(--color-ink));
+  font-size: max(16px, 1em);
+  line-height: inherit;
+  padding: var(--input-padding, 0.2em 0.6em);
+}
+
+.combox-popup {
+  --panel-border-color: var(--bubble-color);
+  --panel-border-radius: 2em;
+  --panel-border-size: 2px;
+  --panel-padding: 0.4em 1em;
+  --panel-size: auto;
+
+  inline-size: auto !important;
+  inset: -2px auto auto 0;
+  max-inline-size: var(--panel-size) !important;
+  position: absolute;
+  z-index: 2;
+
+  &[open] {
+    display: flex;
   }
 }

app/assets/stylesheets/comments.css

@@ -15,10 +15,6 @@
   max-inline-size: 66ch;
   margin-block: var(--comment-padding-block);
   margin-inline: 0 auto;
-
-  textarea {
-    padding: var(--comment-padding-block) var(--comment-padding-inline);
-  }
 }
 
 .comment__avatar {
@@ -57,6 +53,21 @@
   }
 }
 
+.comment__input {
+  --input-border-color: var(--color-subtle);
+
+  line-height: inherit;
+  min-block-size: calc(4lh + (2 * var(--comment-padding-block)));
+  min-inline-size: 100%;
+  padding-block: var(--comment-padding-block);
+  padding-inline: calc(var(--comment-padding-inline) + calc((1lh - 1ex) / 2));
+
+  @supports (field-sizing: content) {
+    field-sizing: content;
+    min-block-size: calc(3lh + (2 * var(--comment-padding-block)));
+  }
+}
+
 .comment--mine {
   flex-direction: row-reverse;
   margin-inline: auto 0;
@@ -64,17 +75,11 @@
   .comment__author {
     flex-direction: row-reverse;
   }
+}
 
-  .input {
-    &::placeholder {
-      color: var(--color-ink);
-      opacity: 0.5;
-    }
-
-    &::selection {
-      background-color: var(--color-selected-dark);
-    }
-  }
+.comment__submit {
+  position: absolute;
+  inset: auto 0.5em 0.5em auto;
 }
 
 .comment__timestamp {
@@ -86,6 +91,5 @@
   color: var(--bubble-color);
   font-weight: 600;
   gap: 0.5ch;
-  /* margin-block: calc(var(--comment-padding-block) * -1); */
   padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
 }

app/assets/stylesheets/panels.css

@@ -1,6 +1,6 @@
 .panel {
   background-color: var(--color-bg);
-  border: 1px solid var(--panel-border-color, var(--color-subtle));
+  border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
   color: var(--color-ink);
   border-radius: var(--panel-border-radius, 1em);
   inline-size: var(--panel-size, 60ch);

app/assets/stylesheets/utilities.css

@@ -69,8 +69,8 @@
 }
 
 .gap-half {
-  column-gap: var(--inline-space-half);
-  row-gap: var(--block-space-half);
+  column-gap: var(--column-gap, var(--inline-space-half));
+  row-gap: var(--row-gap, var(--block-space-half));
 }
 
 /* Sizing */

app/views/bubbles/_bubble.html.erb

@@ -11,7 +11,7 @@
         <% end %>
       </h1>
 
-      <div class="bubble__tags flex align-end justify-center gap-half">
+      <div class="bubble__tags flex flex-wrap align-end justify-center gap-half txt-tight-lines">
         <%= render "bubbles/tags", bubble: bubble %>
       </div>
     </div>

app/views/bubbles/_color.html.erb

@@ -1,5 +1,5 @@
 <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
-  <button class="btn full-width justify-start borderless" data-action="dialog#toggle">
+  <button class="btn full-width justify-start borderless" data-action="dialog#open:stop">
     <%= image_tag "art.svg", aria: { hidden: true }, size: 24 %>
     <span>Color</span>
   </button>

app/views/bubbles/_tags.html.erb

@@ -1,4 +1,6 @@
 <% bubble.tags.each do |tag| %>
-  <%= link_to tag.hashtag, bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
-        class: "btn btn--plain fill-transparent", style: "color: #{bubble.color}" %>
+  <%= link_to bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
+        class: "bubble__tag btn btn--plain fill-transparent min-width", style: "color: #{bubble.color}" do %>
+    <span class="overflow-ellipsis"><%= tag.hashtag %></span>
+  <% end %>
 <% end %>

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

@@ -2,12 +2,12 @@
     data-controller="animation" data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
   <div class="bubble__shape flex-item-no-shrink"></div>
 
-  <div class="flex flex-column">
+  <div class="flex flex-column min-width">
     <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__title-link flex align-center gap min-width" do %>
       <strong class="bubble__title-text flex--inline gap-half overflow-ellipsis"><%= bubble.title %></strong>
     <% end %>
 
-    <div class="flex align-end gap-half txt-small">
+    <div class="flex align-end gap-half txt-small full-width">
       <%= render "bubbles/tags", bubble: bubble %>
     </div>
   </div>

app/views/bubbles/sidebar/_assignment.html.erb

@@ -1,12 +1,21 @@
-<details name="assignments" class="position-relative" data-controller="expandable" data-action="focusout->expandable#closeOnFocusOutside">
-  <summary class="btn full-width justify-start borderless">
+<div name="assignments" class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <button class="btn full-width justify-start borderless" data-action="click->dialog#open:stop">
     <%= image_tag "person.svg", aria: { hidden: true }, size: 24 %>
     <span>Assign to someone</span>
-  </summary>
+  </button>
 
-  <%= form_with url: bucket_bubble_assignment_toggles_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %>
-    <%= form.combobox :assignee_id, users, required: true,
-          render_in: { partial: "bubbles/users/listbox_option", as: :user, locals: { bubble: bubble } },
-          data: { controller: "autofocus", action: "hw-combobox:selection->form#submit" } %>
-  <% end %>
-</details>
+  <dialog class="combox-popup panel align-center gap-half fill-white shadow" data-dialog-target="dialog">
+    <%= form_with url: bucket_bubble_assignment_toggles_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %>
+      <%= form.combobox :assignee_id, users, required: true,
+            render_in: { partial: "bubbles/users/listbox_option", as: :user, locals: { bubble: bubble } },
+            data: { controller: "autofocus", action: "hw-combobox:selection->form#submit" } %>
+    <% end %>
+
+    <form method="dialog">
+      <button class="btn txt-small" title="Close (esc)">
+        <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
+        <span class="for-screen-reader">Close</span>
+      </button>
+    </form>
+  </dialog>
+</div>

app/views/bubbles/sidebar/_tag.html.erb

@@ -1,12 +1,21 @@
-<details name="assignments" class="position-relative" data-controller="expandable" data-action="focusout->expandable#closeOnFocusOutside">
-  <summary class="btn full-width justify-start borderless">
+<div name="assignments" class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <button class="btn full-width justify-start borderless" data-action="click->dialog#open:stop">
     <%= image_tag "tag.svg", aria: { hidden: true }, size: 24 %>
     <span>Tag this</span>
-  </summary>
+  </button>
 
-  <%= form_with url: bucket_bubble_tagging_toggles_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %>
-    <%= form.combobox :tag_id, tags, required: true, name_when_new: "tag_title",
-          render_in: { partial: "bubbles/tags/listbox_option", as: :tag, locals: { bubble: bubble } },
-          data: { controller: "autofocus", action: "hw-combobox:selection->form#submit" } %>
-  <% end %>
-</details>
+  <dialog class="combox-popup panel align-center gap-half fill-white shadow" data-dialog-target="dialog">
+    <%= form_with url: bucket_bubble_tagging_toggles_path(bubble.bucket, bubble), class: "min-width", data: { controller: "form" } do |form| %>
+      <%= form.combobox :tag_id, tags, required: true, name_when_new: "tag_title",
+            render_in: { partial: "bubbles/tags/listbox_option", as: :tag, locals: { bubble: bubble } },
+            data: { controller: "autofocus", action: "hw-combobox:selection->form#submit" } %>
+    <% end %>
+
+    <form method="dialog">
+      <button class="btn txt-small" title="Close (esc)">
+        <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
+        <span class="for-screen-reader">Close</span>
+      </button>
+    </form>
+  </dialog>
+</div>

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 %>

app/views/comments/_new.html.erb

@@ -1,14 +1,9 @@
-<div class="comment flex align-start full-width comment--mine">
-  <figure class="comment__avatar avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></figure>
-
-  <div class="comment__content flex flex-column full-width">
-    <div class="comment__author flex align-center gap-half">
-      <strong><%= Current.user.name %></strong>
-    </div>
-    <div class="comment__body txt-align-start margin-block-start-half">
+<div class="comment flex align-start full-width comment--mine margin-block-end-double">
+  <div class="flex flex-column full-width">
+    <div class="position-relative">
       <%= form_with model: Comment.new, url: bucket_bubble_comments_path(bubble.bucket, bubble), class: "flex flex-column gap full-width", data: { controller: "form", action: "keydown.meta+enter->form#submit" } do |form| %>
-        <%= form.markdown_area :body, class: "input border border-radius", required: true, placeholder: new_comment_placeholder(bubble) %>
-        <%= form.button class: "btn btn--reversed center" do %>
+        <%= form.markdown_area :body, class: "input comment__input", required: true, placeholder: new_comment_placeholder(bubble) %>
+        <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-end txt-small" do %>
           <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %>
           <span class="for-screen-reader">Save</span>
         <% end %>

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 %>