CSS cleanup

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/views/collections/show/menu/_column.html.erb

@@ -26,7 +26,7 @@
 
   <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">
+    <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" %>

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