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

@@ -5,6 +5,7 @@
     --actions-block-inset: 1.5rem;
     --actions-inline-inset: 4rem;
     --color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-canvas));
+    --half-btn-height: 1.25rem;
     --padding-inline: calc(var(--block-space-double) + var(--block-space));
     --padding-block: calc(var(--block-space-double) + var(--block-space-half));
 
@@ -14,7 +15,8 @@
     grid-template-areas:
       "notch-top notch-top notch-top"
       "actions-left card actions-right"
-      "notch-bottom notch-bottom notch-bottom";
+      "notch-bottom notch-bottom notch-bottom"
+      "closure-message closure-message closure-message";
     grid-template-columns: 48px minmax(0, 1120px) 48px;
     inline-size: fit-content;
     margin-block-start: var(--block-space);
@@ -47,6 +49,7 @@
     .card__body {
       @media (max-width: 639px) {
         flex-direction: column;
+        padding-block-end: calc(var(--card-padding-block) * 1.5);
       }
     }
 
@@ -89,15 +92,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;
       }
     }
 
@@ -127,13 +145,15 @@
     }
 
     @media (max-width: 799px) {
+      --half-btn-height: 1.5rem;
       --padding-inline: 1.5ch;
 
       column-gap: 0;
       grid-template-areas:
         "notch-top notch-top notch-top"
         "card card card"
-        "actions-left notch-bottom actions-right";
+        "actions-left notch-bottom actions-right"
+        "closure-message closure-message closure-message";
       grid-template-columns: 1fr auto 1fr;
       inline-size: calc(100% + 2 * var(--padding-inline));
       margin-inline: calc(-1 * var(--padding-inline));
@@ -151,7 +171,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);
     }
   }
@@ -263,13 +288,14 @@
   }
 
   .card-perma__notch--bottom {
-    --half-btn-height: 1.25rem;
-
     grid-area: notch-bottom;
 
     /* Overlap the card BG by half the button height */
     &:has(.btn) {
-      translate: 0 calc(-1 * var(--half-btn-height));
+      &,
+      ~ .card-perma__closure-message {
+        translate: 0 calc(-1 * var(--half-btn-height));
+      }
     }
 
     form {
@@ -314,5 +340,8 @@
 
   .card-perma__closure-message {
     color: var(--card-color);
+    grid-area: closure-message;
+    margin-block-start: 0.5ch;
+    padding-inline: 1ch;
   }
 }

app/assets/stylesheets/events.css

@@ -225,6 +225,11 @@
     padding-block: calc(var(--events-gap) * 3) var(--events-gap);
     position: sticky;
     z-index: var(--z-events-column-header);
+
+    @media (max-width: 639px) {
+      margin-inline: calc(var(--main-padding) * -1);
+      padding-inline: var(--main-padding);
+    }
   }
 
   .events__column-footer {

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

@@ -6,8 +6,40 @@
     --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
     --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));
 
+    -webkit-tap-highlight-color: transparent;
+
     .hide-on-native {
       display: none;
     }
+
+    /* Header
+    /* ------------------------------------------------------------------------ */
+
+    .header:is(
+      :not(:has(.header__title, .header__actions)),
+      :not(:has(.header__title, .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;
+    }
+
+    /* Search
+    /* ------------------------------------------------------------------------ */
+
+    .search__title {
+      text-decoration: none;
+    }
   }
 }

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,22 @@ summary {
   .search__title {
     text-decoration: underline;
   }
+
+  /* Perma
+  /* ------------------------------------------------------------------------ */
+
+  .search-perma {
+    .search__form > label,
+    .search__reset {
+      display: none;
+    }
+
+    .search__input {
+      max-inline-size: min(80ch, 100%);
+    }
+
+    .search {
+      padding-inline: 0;
+    }
+  }
 }