Merge pull request #1189 from basecamp/column-header-fixes

Column header fixes

app/assets/stylesheets/card-columns.css

@@ -189,10 +189,9 @@
     }
 
     .cards:not(.is-collapsed) & {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
       inline-size: 100%;
       margin-block-end: calc(-0.5 * var(--cards-gap));
+      justify-content: center;
 
       &:hover,
       &:has(~ .cards__expander-menu:hover) {
@@ -207,14 +206,13 @@
     inline-size: var(--column-width-collapsed);
 
     .cards:not(.is-collapsed) & {
-      opacity: 0;
+      display: none;
     }
   }
 
   .cards__expander-title {
     font-weight: inherit;
     font-size: inherit;
-    grid-column: 2;
     line-height: var(--column-width-collapsed);
 
     .cards.is-collapsed & {
@@ -466,7 +464,6 @@
       color: var(--card-text-color);
     }
 
-    /* The following groups the header and title on considering cards */
     .card__header {
       color: var(--color-ink);
       padding-block-start: calc(var(--card-padding-block) / 2);
@@ -480,16 +477,6 @@
     .card__body {
       padding-block: 0 var(--card-padding-block);
     }
-    /* End */
-
-    /* The Uncomment the following to add borders and such */
-    /*
-    .card__collection {
-      border-block-end: var(--card-border);
-      border-inline-end: var(--card-border);
-    }
-    */
-    /* End */
 
     .card--drafted {
       --card-color: var(--color-ink-medium) !important;
@@ -508,7 +495,6 @@
     }
   }
 
-
   .card.card--new {
     --border-color: var(--color-selected-dark);
     --border-size: 1px;

app/assets/stylesheets/popup.css

@@ -5,7 +5,7 @@
     --panel-padding: var(--block-space);
     --panel-size: auto;
     --popup-icon-size: 24px;
-    --popup-item-padding-inline: var(--inline-space-half);
+    --popup-item-padding-inline: 0.5rem;
 
     inset: 0 auto auto 50%;
     max-block-size: 80vh;
@@ -122,14 +122,6 @@
         }
       }
     }
-
-    &:has(> :first-child:not(.popup__btn)) {
-      padding-inline-start: var(--popup-item-padding-inline);
-    }
-
-    &:has(> :last-child:not(.popup__btn)) {
-      padding-inline-end: var(--popup-item-padding-inline);
-    }
   }
 
   /* The actionable thing with padding within popup__item */
@@ -165,6 +157,7 @@
     --icon-size: 1em;
 
     inline-size: var(--popup-icon-size);
+    margin-inline-start: var(--popup-item-padding-inline);
   }
 
   .popup__radio {
@@ -172,6 +165,7 @@
 
     block-size: var(--popup-icon-size);
     inline-size: var(--popup-icon-size);
+    margin-inline-start: var(--popup-item-padding-inline);
     flex-shrink: 0;
 
     &:hover {

app/views/collections/show/_column.html.erb

@@ -11,15 +11,5 @@
     <%= render "collections/show/menu/column", column: column %>
   <% end %>
 
-  <div data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-    <button id="<%= dom_id(column, :manage_menu) %>" class="popup__btn btn" data-action="click->dialog#open:stop" data-clicker-target="clickable" hidden aria-hidden>Rename column</button>
-    <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
-      <%= form_with model: [column.collection, column], data: { action: "turbo:submit-end->dialog#close" } do |form| %>
-        <%= form.text_field :name, class: "input", placeholder: "Column name", value: column.name, required: true %>
-        <%= form.submit "Rename column", class: "btn btn--link" %>
-      <% end %>
-    </dialog>
-  </div>
-
   <%= column_frame_tag dom_id(column, :cards), src: collection_column_path(column.collection, column) %>
 </section>

app/views/collections/show/menu/_column.html.erb

@@ -23,4 +23,14 @@
       </li>
     </ul>
   </dialog>
+
+  <div data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+    <button id="<%= dom_id(column, :manage_menu) %>" class="popup__btn btn" data-action="click->dialog#open:stop" data-clicker-target="clickable" hidden aria-hidden>Rename column</button>
+    <dialog class="popup panel flex-column gap-half fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+      <%= form_with model: [column.collection, column], data: { action: "turbo:submit-end->dialog#close" } do |form| %>
+        <%= form.text_field :name, class: "input", placeholder: "Column name", value: column.name, required: true %>
+        <%= form.submit "Rename column", class: "btn btn--link" %>
+      <% end %>
+    </dialog>
+  </div>
 </div>

app/views/collections/show/menu/_columns.html.erb

@@ -2,7 +2,7 @@
   <button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open:stop" aria-label="Add a new column, etc.">
     <%= icon_tag "add", class: "translucent", "aria-hidden": true %>
   </button>
-  <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+  <dialog class="popup panel flex-column gap-half fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
     <%= form_with model: [ collection, Column.new ], data: { controller: "form", action: "turbo:submit-end->dialog#close turbo:submit-end->form#reset" } do |form| %>
       <%= form.text_field :name, class: "input", placeholder: "Column name", required: true, autocomplete: "off" %>
       <%= form.submit "Add a column", class: "btn btn--link" %>