Improve layout and truncation

app/assets/stylesheets/events.css

@@ -64,12 +64,6 @@
     .events__index-header:has(&) {
       position: relative;
     }
-
-    #header:has(&) {
-      max-inline-size: 100%;
-      position: relative;
-      z-index: 5;
-    }
   }
 
   .event {

app/assets/stylesheets/popup.css

@@ -1,13 +1,13 @@
 @layer components {
   .popup {
     --panel-border-radius: 0.5em;
-    --panel-padding: 0.4em 0.5em 0.5em;
+    --panel-padding: var(--block-space);
     --panel-size: auto;
 
     inline-size: auto;
     inset: 0 auto auto 50%;
-    min-inline-size: 20ch;
-    max-inline-size: 40ch;
+    min-inline-size: min(20ch, 90vw);
+    max-inline-size: min(50ch, 90vw);
     position: absolute;
     transform: translateX(-50%);
     z-index: 2;
@@ -15,12 +15,22 @@
     &[open] {
       display: flex;
     }
+
+    #header:has(&) {
+      max-inline-size: 100%;
+      position: relative;
+      z-index: 5;
+    }
   }
 
   .popup__group {
     background: var(--color-subtle-light);
     max-inline-size: 100%;
-    padding-inline-start: var(--inline-space-half);
+    padding-inline: var(--inline-space);
+
+    .btn {
+      --btn-background: transparent;
+    }
     
     @media (any-hover: hover) {
       &:hover {
@@ -30,7 +40,7 @@
   }
 
   .popup__item {
-    --btn-background: transparent;
+    --btn-background: var(--color-subtle-light);
     --btn-border-radius: 0.3em;
     --btn-border-size: 0;
     --btn-font-weight: 500;
@@ -43,14 +53,10 @@
     max-inline-size: 100%;
     text-align: start;
 
-    &::after {
-      border-radius: var(--btn-border-radius);
-      border: var(--btn-border-size) solid var(--btn-border-color, var(--color-subtle));
-      content: "";
-      display: block;
-      inline-size: calc(100% - var(--btn-padding) * 2);
-      block-size: calc(100% - var(--btn-padding) * 2);
-
+    @media (any-hover: hover) {
+      &:where(:not(:active):hover) {
+        --btn-background: var(--color-selected);
+      }
     }
 
     &:has(input:checked)  {

app/views/cards/assignments/new.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag @card, :assignment do %>
-  <strong class="popup__title margin-block-start-half pad-inline-half txt-nowrap">Assign this to…</strong>
+  <strong class="popup__title pad-inline-half txt-nowrap">Assign this to…</strong>
 
   <div class="flex flex-column full-width popup__list">
     <% @collection.users.active.alphabetically.each do |user| %>

app/views/cards/index/_collections_filter.html.erb

@@ -1,12 +1,12 @@
-<%= form_with url: cards_path, method: :get, class: "flex flex-column full-width popup__list",
+<%= form_with url: cards_path, method: :get, class: "flex flex-column max-width popup__list",
       data: { controller: "form" } do |form| %>
   <% filter.as_params.except(:collection_ids).each do |key, value| %>
     <%= filter_hidden_field_tag key, value %>
   <% end %>
 
   <% Current.user.collections.order(:name).each do |collection| %>
-    <div class="popup__group flex align-center gap-half overflow-ellipsis">
-      <div class="btn txt-xx-small">
+    <div class="popup__group flex align-center">
+      <div class="btn txt-xx-small flex-item-no-shrink">
         <%= form.check_box "collection_ids[]", {
               checked: filter.collections.include?(collection),
               data: { action: "change->form#submit" },
@@ -16,13 +16,14 @@
         <span class="for-screen-reader">
           Toggle filter for <%= collection.name %>
         </span>
-        <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+        <%= icon_tag "check", size: 18, class: "checked" %>
       </div>
 
-      <%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item justify-space-between" do %>
-        <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
-        <span class="translucent"> ›</span>
+      <%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width" do %>
+        <span class="overflow-ellipsis"><%= collection.name %></span>
       <% end %>
+  
+      <span class="translucent flex-item-no-shrink"> ›</span>
     </div>
   <% end %>
 <% end %>

app/views/cards/index/_header.html.erb

@@ -5,19 +5,23 @@
   <div class="btn btn--placeholder flex-item-justify-start"></div>
 
   <header class="flex flex-inline flex-column center flex-shrink">
-    <div class="card-filter--collection flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+    <div class="card-filter--collection flex-inline center position-relative" data-controller="dialog" data-action="click@document->dialog#closeOnClickOutside">
       <button class="txt-align-center input input--select borderless center txt-medium" data-action="click->dialog#open:stop">
         <h1 class="txt-large overflow-ellipsis margin-none">
           <%= filter_title filter %>
         </h1>
       </button>
 
-      <dialog class="events__popup popup popup--animated panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
+      <dialog class="popup popup--animated panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="keydown.esc->dialog#close:stop turbo:before-cache@document->dialog#close">
         <div class="flex align-center full-width gap-half">
           <span class="btn borderless" style="pointer-events: none; --icon-size: 1.3em; --btn-padding: 0 0.6em 0 0.3em;">
             <%= icon_tag "filter" %>
           </span>
           <strong class="popup__title txt-medium">Collections</strong>
+          <button class="btn borderless txt-x-small flex-item-justify-end" data-action="click->dialog#close" >
+            <%= icon_tag "remove-med" %>
+            <span class="for-screen-reader">Close</span>
+          </button>
         </div>
 
         <%= render "cards/index/collections_filter", filter: filter %>

app/views/cards/taggings/new.html.erb

@@ -1,6 +1,6 @@
 <%= turbo_frame_tag @card, :tagging do %>
   <dialog class="popup panel flex-column align-start justify-start fill-white shadow" data-dialog-target="dialog">
-    <strong class="popup__title margin-block-half pad-inline-half">Tag this…</strong>
+    <strong class="popup__title margin-block-end-half pad-inline-half">Tag this…</strong>
 
     <%= form_with url: card_taggings_path(@card), class: "flex gap-half align-center full-width pad-inline-half margin-block-end" do |form| %>
       <%= form.text_field :tag_title, placeholder: "New tag name...", class: "input txt-small full-width", autocomplete: "off" %>