Mobile app / Style edits

app/assets/stylesheets/mobile_app/card-perma.css

@@ -0,0 +1,5 @@
+@layer mobile_app {
+  .card-perma {
+    margin-block-start: 0;
+  }
+}

app/assets/stylesheets/mobile_app/header.css

@@ -0,0 +1,14 @@
+@layer mobile_app {
+  .header:is(
+    :not(:has(.header__actions)),
+    :not(:has(.header__actions--end)):has(.header__actions--start .btn--back:only-child)
+  ) {
+    display: none;
+  }
+
+  .header__actions {
+    .btn--back {
+      display: none;
+    }
+  }
+}

app/assets/stylesheets/web/buttons.css

@@ -95,7 +95,7 @@
   .btn[aria-label]:where(:has(.icon)),
   .btn:where(:has(.for-screen-reader):has(.icon)) {
     --btn-padding: 0;
-    --icon-size: 75%;
+    --icon-size: 70%;
 
     aspect-ratio: 1;
     block-size: var(--btn-size);
@@ -107,13 +107,29 @@
     > * {
       grid-area: 1/1;
     }
+
+    @media (max-width: 640px) {
+      --btn-size: 3em;
+    }
   }
 
   /* Make a normal button circular on mobile */
   @media (max-width: 639px) {
     .btn--circle-mobile {
+      --btn-size: 3em;
+      --btn-padding: 0;
+      --icon-size: 70%;
+
       aspect-ratio: 1;
-      padding: 0.5em;
+      block-size: var(--btn-size);
+      display: grid;
+      inline-size: var(--btn-size);
+      justify-content: normal; /* FF fix */
+      place-items: center;
+
+      > * {
+        grid-area: 1/1;
+      }
 
       kbd,
       span:last-of-type {
@@ -270,4 +286,3 @@
     }
   }
 }
-

app/assets/stylesheets/web/card-perma.css

@@ -47,6 +47,7 @@
     .card__body {
       @media (max-width: 639px) {
         flex-direction: column;
+        padding-block-end: calc(var(--card-padding-block) * 1.5);
       }
     }
 
@@ -87,17 +88,31 @@
       max-inline-size: 32ch;
 
       @media (max-width: 639px) {
+        flex-direction: row;
+        gap: 0;
         border: 1px solid var(--card-color);
         border-radius: 0.25em;
-        overflow: hidden;
+        overflow: auto;
         max-inline-size: 100%;
         padding: 0;
+        position: relative;
+
+        & > form {
+          flex-grow: 1;
+          max-inline-size: 10em;
+        }
+
+        & > form + form:not(:has(.card__column-name--current)) {
+          box-shadow: -1px 0 0 0 var(--color-container);
+        }
       }
     }
 
     .card__column-name {
       @media (max-width: 639px) {
         --btn-border-radius: 0;
+        justify-content: center;
+        padding: 0.5em;
       }
     }
 
@@ -151,8 +166,9 @@
     grid-area: card;
     padding: clamp(2rem, 4vw, var(--padding-block));
 
-    @media (max-width: 799px) {
-      padding-inline: var(--padding-inline);
+    @media (max-width: 639px) {
+      padding: clamp(0.25rem, 2vw, var(--padding-block));
+      padding-block-end: clamp(2.5rem, 4vw, var(--padding-block));
     }
   }
 

app/assets/stylesheets/web/pins.css

@@ -0,0 +1,10 @@
+@layer components {
+  /* Pins list
+  /* ------------------------------------------------------------------------ */
+
+  .pins-list {
+    --panel-size: 45ch;
+
+    display: flex;
+  }
+}

app/assets/stylesheets/web/search-perma.css

@@ -0,0 +1,23 @@
+@layer components {
+  .search-perma {
+    margin-block-start: var(--block-space);
+
+    .search__form > label,
+    .search__reset {
+      display: none;
+    }
+
+    .search__input {
+      --input-padding: 0.5em 0.1em;
+      text-align: center;
+
+      &:focus-visible {
+        text-align: start;
+      }
+    }
+
+    .search {
+      padding-inline: var(--block-space);
+    }
+  }
+}

app/assets/stylesheets/web/trays.css

@@ -157,10 +157,10 @@
     --tray-item-z: calc(6 - var(--tray-item-index));
 
     position: relative;
+    font-size: 10px;
+    margin-block-end: var(--tray-item-margin);
 
     .tray__dialog & {
-      font-size: 10px;
-      margin-block-end: var(--tray-item-margin);
       transition: var(--tray-duration) var(--ease-out-overshoot-subtle);
       transition-delay: var(--tray-item-delay);
       transition-property: margin, opacity, scale;
@@ -285,7 +285,7 @@
   /* Tray cards
   /* ------------------------------------------------------------------------ */
 
-  .tray {
+  .tray__item {
     .card {
       --card-padding-block: 1.5ch;
       --card-padding-inline: 1.5ch;
@@ -341,76 +341,97 @@
     inset-inline: var(--tray-margin) auto;
     view-transition-name: tray-pins;
 
+    .pins-list {
+      display: contents;
+    }
+
     #footer:has(.bar__placeholder[hidden]) & {
       inset-inline-start: -100%;
     }
 
-    .tray__item {
-      --tray-item-z: calc(10 - var(--tray-item-index));
-
-      position: relative;
-
-      [open] &[aria-selected] {
-        outline: 0;
-        z-index: calc(var(--tray-item-z) + 2);
+    /* Disable the expander if there aren't items to show */
+    .tray__dialog:not(:has(.tray__item)) ~ .tray__toggle {
+      opacity: 0.5;
 
-        .card__link {
-          border-radius: 0.25ch;
-          outline: var(--focus-ring-size) solid var(--focus-ring-color);
-          outline-offset: var(--focus-ring-offset);
-          z-index: 1;
-        }
+      &, .tray__toggle-btn {
+        pointer-events: none;
       }
+    }
 
-      /* Show 6 max items on smallest devices */
-      @media (max-height: 578px) {
-        &:nth-child(1n + 7) { display: none; }
+    /* Add a border on mobile */
+    @media (max-width: 799px) {
+      .tray__dialog:not([open]) ~ .tray__toggle {
+        border-inline-end: 1px dashed var(--color-ink-light);
+        translate: calc(-1 * var(--tray-margin)) 0;
       }
 
-      /* 7 max */
-      @media (min-height: 578px) and (max-height: 656px) {
-        &:nth-child(1n + 8) { display: none; }
-      }
+    }
+  }
 
-      /* 8 max */
-      @media (min-height: 656px) and (max-height: 734px) {
-        &:nth-child(1n + 9) { display: none; }
-      }
+  .tray__item--pin {
+    --tray-item-z: calc(10 - var(--tray-item-index));
 
-      /* 9 max */
-      @media (min-height: 734px) and (max-height: 812px) {
-        &:nth-child(1n + 10) { display: none; }
-      }
+    position: relative;
 
-      /* 10 max on larger screens */
-      @media (min-height: 812px) {
-        &:nth-child(1n + 11) { display: none; }
-      }
+    [open] &[aria-selected] {
+      outline: 0;
+      z-index: calc(var(--tray-item-z) + 2);
 
-      &:not([aria-selected]) .card__link:focus-visible,
-      .tray__dialog:not([open]) & .card__link:focus-visible {
-        --focus-ring-size: 0;
+      .card__link {
+        border-radius: 0.25ch;
+        outline: var(--focus-ring-size) solid var(--focus-ring-color);
+        outline-offset: var(--focus-ring-offset);
+        z-index: 1;
       }
     }
 
+    /* Show 6 max items on smallest devices */
+    @media (max-height: 578px) {
+      &:nth-child(1n + 7) { display: none; }
+    }
+
+    /* 7 max */
+    @media (min-height: 578px) and (max-height: 656px) {
+      &:nth-child(1n + 8) { display: none; }
+    }
+
+    /* 8 max */
+    @media (min-height: 656px) and (max-height: 734px) {
+      &:nth-child(1n + 9) { display: none; }
+    }
+
+    /* 9 max */
+    @media (min-height: 734px) and (max-height: 812px) {
+      &:nth-child(1n + 10) { display: none; }
+    }
+
+    /* 10 max on larger screens */
+    @media (min-height: 812px) {
+      &:nth-child(1n + 11) { display: none; }
+    }
+
+    &:not([aria-selected]) .card__link:focus-visible,
+    .tray__dialog:not([open]) & .card__link:focus-visible {
+      --focus-ring-size: 0;
+    }
+
     .tray__remove-pin-btn {
       --btn-icon-size: 1.25em;
       --btn-size: 2em;
 
       background-color: var(--card-bg-color);
       inset: 0 0 auto auto;
-      opacity: 0;
-      pointer-events: none;
       position: absolute;
       z-index: 1;
+      opacity: 0.66;
 
-      .tray__dialog[open] & {
-        opacity: 0.66;
-        pointer-events: unset;
+      &:hover {
+        opacity: 1;
+      }
 
-        &:hover {
-          opacity: 1;
-        }
+      .tray__dialog:not([open]) & {
+        opacity: 0;
+        pointer-events: none;
       }
 
       [aria-busy] & {
@@ -450,9 +471,10 @@
       inline-size: fit-content;
       margin: 0 0 0 auto;
       transition: translate 150ms ease-out;
+      translate: -2em;
 
-      [open] & {
-        translate: -2em;
+      .tray__dialog:not([open]) & {
+        translate: 0;
       }
     }
 
@@ -490,24 +512,6 @@
     .card__bubble {
       display: none;
     }
-
-    /* Disable the expander if there aren't items to show */
-    .tray__dialog:not(:has(.tray__item)) ~ .tray__toggle {
-      opacity: 0.5;
-
-      &, .tray__toggle-btn {
-        pointer-events: none;
-      }
-    }
-
-    /* Add a border on mobile */
-    @media (max-width: 799px) {
-      .tray__dialog:not([open]) ~ .tray__toggle {
-        border-inline-end: 1px dashed var(--color-ink-light);
-        translate: calc(-1 * var(--tray-margin)) 0;
-      }
-
-    }
   }
 
   ::view-transition-group(tray-pins) {

app/assets/stylesheets/web/utilities.css

@@ -40,6 +40,7 @@
   .align-center { align-items: center; }
   .align-start { align-items: start; }
   .align-end { align-items: end; }
+  .align-stretch { align-items: stretch; }
 
   .align-self-center { align-self: center; }
   .align-self-end { align-self: end; }

app/helpers/columns_helper.rb

@@ -6,8 +6,8 @@ def button_to_set_column(card, column)
       method: :post,
       class: [ "card__column-name btn", { "card__column-name--current": column == card.column && card.open? } ],
       style: "--column-color: #{column.color}",
-      form_class: "flex align-center gap-half",
-      data: { turbo_frame: "_top" }
+      form_class: "flex align-stretch gap-half",
+      data: { turbo_frame: "_top", scroll_to_target: column == card.column && card.open? ? "target" : nil }
   end
 
   def column_tag(id:, name:, drop_url:, collapsed: true, selected: nil, card_color: "var(--color-card-default)", data: {}, **properties, &block)

app/javascript/controllers/scroll_to_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "target" ]
+
+  connect() {
+    this.#scrollTargetIntoView()
+  }
+
+  #scrollTargetIntoView() {
+    if(this.hasTargetTarget) {
+      this.element.scrollTo({
+        top: this.targetTarget.offsetTop - this.element.offsetHeight / 2 + this.targetTarget.offsetHeight / 2,
+        left: this.targetTarget.offsetLeft - this.element.offsetWidth / 2 + this.targetTarget.offsetWidth / 2,
+        behavior: "instant"
+      })
+    }
+  }
+}