Mobile app / Prepare webviews

app/assets/stylesheets/buttons.css

@@ -107,13 +107,22 @@
     > * {
       grid-area: 1/1;
     }
+
+    @media (max-width: 639px) {
+      --btn-size: 3em;
+      --icon-size: 70%;
+    }
   }
 
   /* 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;
+      inline-size: var(--btn-size);
 
       kbd,
       span:last-of-type {
@@ -270,4 +279,3 @@
     }
   }
 }
-

app/assets/stylesheets/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);
       }
     }
 
@@ -89,15 +90,30 @@
       @media (max-width: 639px) {
         border: 1px solid var(--card-color);
         border-radius: 0.25em;
-        overflow: hidden;
+        flex-direction: row;
+        gap: 0;
+        overflow: auto;
         max-inline-size: 100%;
         padding: 0;
+        position: relative;
+        white-space: nowrap;
+
+        & > form {
+          flex-grow: 1;
+          max-inline-size: 25ch;
+          min-block-size: 2.5em;
+        }
+
+        & > 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;
       }
     }
 
@@ -151,7 +167,12 @@
     grid-area: card;
     padding: clamp(2rem, 4vw, var(--padding-block));
 
-    @media (max-width: 799px) {
+    @media (max-width: 639px) {
+      padding: clamp(0.25rem, 2vw, var(--padding-block));
+      padding-block-end: clamp(2.5rem, 4vw, var(--padding-block));
+    }
+
+    @media (min-width: 640px) and (max-width: 799px) {
       padding-inline: var(--padding-inline);
     }
   }

app/assets/stylesheets/header.css

@@ -116,17 +116,15 @@
   /* Optional class to stack header actions on small screens
   /* ------------------------------------------------------------------------ */
 
-  /* .header--mobile-actions-stack {
+  .header--mobile-actions-stack {
     @media (max-width: 639px) {
-      grid-template-columns: 1fr 1fr;
       grid-template-areas:
-        "menu menu"
-        "actions-start actions-end"
-        "title title";
+        "actions-start menu actions-end"
+        "title title title";
 
       .header__title {
         margin-block-start: 0.25rem;
       }
     }
-  } */
+  }
 }

app/assets/stylesheets/native.css

@@ -9,5 +9,28 @@
     .hide-on-native {
       display: none;
     }
+
+    /* Header
+    /* ------------------------------------------------------------------------ */
+
+    .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;
+      }
+    }
+
+    /* Card perma
+    /* ------------------------------------------------------------------------ */
+
+    .card-perma {
+      margin-block-start: 0;
+    }
   }
 }

app/assets/stylesheets/pins.css

@@ -0,0 +1,5 @@
+@layer components {
+  .pins-list {
+    --panel-size: 45ch;
+  }
+}

app/assets/stylesheets/search.css

@@ -26,26 +26,30 @@ summary {
     max-block-size: 100%;
     overflow-y: auto;
     overscroll-behavior: contain;
-    padding: var(--block-space) calc(var(--block-space-double) + var(--btn-size));
+    padding: var(--block-space);
   }
 
   /* Form
   /* ------------------------------------------------------------------------ */
 
   .search__input {
     --clear-icon-size: 1em;
-    --focus-ring-size: 0;
-    --input-border-color: var(--color-ink-light);
-    --input-border-radius: 0;
-    --input-padding: 0.1em;
 
-    border-width: 0 0 1px;
     max-inline-size: 50ch;
     position: relative;
 
     &::-webkit-search-cancel-button {
       display: none;
     }
+
+    .bar__input & {
+      --focus-ring-size: 0;
+      --input-border-color: var(--color-ink-light);
+      --input-border-radius: 0;
+      --input-padding: 0.1em;
+
+      border-width: 0 0 1px;
+    }
   }
 
   .search__reset {
@@ -107,4 +111,24 @@ summary {
   .search__title {
     text-decoration: underline;
   }
+
+  /* Perma
+  /* ------------------------------------------------------------------------ */
+
+  .search-perma {
+    margin-block-start: var(--block-space);
+
+    .search__form > label,
+    .search__reset {
+      display: none;
+    }
+
+    .search__input {
+      max-inline-size: min(80ch, 100%);
+    }
+
+    .search {
+      padding-inline: 0;
+    }
+  }
 }

app/assets/stylesheets/trays.css

@@ -156,11 +156,11 @@
     --tray-item-scale: calc(1 - (var(--tray-item-index) - 1) / 30);
     --tray-item-z: calc(6 - var(--tray-item-index));
 
+    font-size: 10px;
+    margin-block-end: var(--tray-item-margin);
     position: relative;
 
     .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;
@@ -345,52 +345,69 @@
       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; }
-      }
+  .tray__item--pin {
+    --tray-item-z: calc(10 - var(--tray-item-index));
 
-      /* 8 max */
-      @media (min-height: 656px) and (max-height: 734px) {
-        &:nth-child(1n + 9) { display: none; }
-      }
+    position: relative;
 
-      /* 9 max */
-      @media (min-height: 734px) and (max-height: 812px) {
-        &:nth-child(1n + 10) { display: none; }
-      }
+    [open] &[aria-selected] {
+      outline: 0;
+      z-index: calc(var(--tray-item-z) + 2);
 
-      /* 10 max on larger screens */
-      @media (min-height: 812px) {
-        &:nth-child(1n + 11) { display: none; }
+      .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;
       }
+    }
 
-      &:not([aria-selected]) .card__link:focus-visible,
-      .tray__dialog:not([open]) & .card__link:focus-visible {
-        --focus-ring-size: 0;
-      }
+    /* 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 {
@@ -399,18 +416,17 @@
 
       background-color: var(--card-bg-color);
       inset: 0 0 auto auto;
-      opacity: 0;
-      pointer-events: none;
+      opacity: 0.66;
       position: absolute;
       z-index: 1;
 
-      .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 +466,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 +507,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) {