Mobile/prepare webviews 2

app/assets/stylesheets/_global.css

@@ -1,6 +1,12 @@
 @layer reset, base, components, modules, utilities, native, platform;
 
 :root {
+  /* Insets - The mobile apps may inject their own custom insets based on native elements on screen, like a floating navigation */
+  --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
+  --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
+  --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));
+
   /* Spacing */
   --inline-space: 1ch;
   --inline-space-half: calc(var(--inline-space) / 2);

app/assets/stylesheets/android.css

@@ -3,5 +3,12 @@
     .hide-on-android {
       display: none;
     }
+
+    /* Filters
+    /* ------------------------------------------------------------------------ */
+
+    .filters {
+      --text-x-small: 1rem;
+    }
   }
 }

app/assets/stylesheets/buttons.css

@@ -107,11 +107,6 @@
     > * {
       grid-area: 1/1;
     }
-
-    @media (max-width: 639px) {
-      --btn-size: 3em;
-      --icon-size: 75%;
-    }
   }
 
   /* Make a normal button circular on mobile */
@@ -125,7 +120,7 @@
       inline-size: var(--btn-size);
 
       kbd,
-      span:last-of-type {
+      span:last-of-type:not(.icon) {
         display: none;
       }
     }
@@ -224,17 +219,15 @@
   .btn--back {
     --btn-border-size: 0;
 
-    font-size: var(--text-medium);
-
     @media (max-width: 639px) {
-      padding: 0.5em;
-
       strong, kbd {
         display: none;
       }
     }
 
     @media (min-width: 640px) {
+      font-size: var(--text-medium);
+
       .icon--arrow-left {
         display: none;
       }

app/assets/stylesheets/card-columns.css

@@ -232,7 +232,7 @@
     overflow-y: auto;
 
     .is-expanded & {
-      padding: var(--column-padding);
+      padding: var(--column-padding) var(--column-padding) calc(var(--column-padding) + var(--custom-safe-inset-bottom));
 
       /* Use the rest of the column height for scrolling */
       @media (max-width: 639px) {

app/assets/stylesheets/events.css

@@ -220,14 +220,14 @@
   .events__column-header {
     background-color: var(--color-canvas);
     grid-row-start: 1;
-    inset-block-start: calc(var(--block-space) * -1);
-    margin-block-end: var(--events-gap);
-    padding-block: calc(var(--events-gap) * 3) var(--events-gap);
+    inset-block-start: var(--custom-safe-inset-top);
+    margin-block: calc(var(--events-gap) * 2) var(--events-gap);
+    padding-block: var(--events-gap);
     position: sticky;
     z-index: var(--z-events-column-header);
 
     @media (max-width: 639px) {
-      margin-inline: calc(var(--main-padding) * -1);
+      margin-inline: calc(var(--main-padding) * -0.5);
       padding-inline: var(--main-padding);
     }
   }
@@ -239,12 +239,16 @@
   }
 
   .events__maximize-button {
-    inset: calc(var(--events-gap) * 3) 0 auto auto;
+    inset: 50% var(--events-gap) auto auto;
     outline-offset: -2px;
     position: absolute;
-    transform: translateY(-10%);
+    transform: translateY(-50%);
     z-index: 1;
 
+    @media (max-width: 639px) {
+      inset-inline-end: 0;
+    }
+
     @media (any-hover: hover ) {
       opacity: 0;
 

app/assets/stylesheets/expandable.css

@@ -0,0 +1,13 @@
+@layer components {
+  .expandable-on-native {
+    body:not([data-platform~=native]) & {
+      &::details-content {
+        display: contents;
+      }
+
+      summary {
+        display: none;
+      }
+    }
+  }
+}

app/assets/stylesheets/header.css

@@ -13,7 +13,7 @@
       "menu menu menu"
       "actions-start title actions-end";
     max-inline-size: 100dvw;
-    padding-block: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--block-space-half);
+    padding-block: calc(var(--block-space-half) + var(--custom-safe-inset-top)) var(--block-space-half);
     padding-inline: var(--main-padding);
     position: relative;
     z-index: var(--z-nav);

app/assets/stylesheets/ios.css

@@ -1,7 +1,27 @@
 @layer platform {
+  :root:has([data-platform~=ios]) {
+    &[data-text-size=xsmall] { font-size: 14px; }
+    &[data-text-size=small] { font-size: 15px; }
+    &[data-text-size=medium] { font-size: 16px; }
+    &[data-text-size=large] { font-size: 17px; }
+    &[data-text-size=xlarge] { font-size: 19px; }
+    &[data-text-size=xxlarge] { font-size: 21px; }
+    &[data-text-size=xxxlarge] { font-size: 23px; }
+  }
+
   [data-platform~=ios] {
     .hide-on-ios {
       display: none;
     }
+
+    /* Events
+    /* ------------------------------------------------------------------------ */
+
+    .events__column-header {
+      -webkit-backdrop-filter: blur(16px);
+      backdrop-filter: blur(16px);
+      background-color: oklch(from var(--color-canvas) l c h / 0.5);
+      border-radius: 10em;
+    }
   }
 }

app/assets/stylesheets/layout.css

@@ -6,6 +6,13 @@
     &.public {
       grid-template-rows: auto 1fr auto;
     }
+
+    &.compact-on-touch {
+      @media (any-hover: none) {
+        grid-template-rows: auto 1fr auto;
+        min-height: unset;
+      }
+    }
   }
 
   /* Required for the card column page on mobile, but not needed otherwise */
@@ -23,8 +30,8 @@
     margin-inline: auto;
     max-inline-size: 100dvw;
     padding-inline:
-      calc(var(--main-padding) + env(safe-area-inset-left))
-      calc(var(--main-padding) + env(safe-area-inset-right));
+      calc(var(--main-padding) + var(--custom-safe-inset-left))
+      calc(var(--main-padding) + var(--custom-safe-inset-right));
     text-align: center;
   }
 

app/assets/stylesheets/lightbox.css

@@ -3,16 +3,23 @@
     --dialog-duration: 350ms;
     --lightbox-padding: 3vmin;
 
+    align-items: center;
     background-color: transparent;
     block-size: 100dvh;
     border: 0;
+    display: flex;
     inline-size: 100dvw;
     inset: 0;
+    justify-content: center;
     margin: auto;
     max-height: unset;
     max-width: unset;
     overflow: hidden;
-    padding: var(--lightbox-padding);
+    padding:
+      calc(var(--lightbox-padding) + var(--custom-safe-inset-top))
+      calc(var(--lightbox-padding) + var(--custom-safe-inset-right))
+      calc(var(--lightbox-padding) + var(--custom-safe-inset-bottom))
+      calc(var(--lightbox-padding) + var(--custom-safe-inset-left));
     text-align: center;
 
     &::backdrop {
@@ -47,12 +54,15 @@
   .lightbox__actions {
     display: flex;
     gap: 1ch;
-    inset: var(--lightbox-padding) var(--lightbox-padding) auto auto;
+    inset:
+      calc(var(--lightbox-padding) + var(--custom-safe-inset-top))
+      calc(var(--lightbox-padding) + var(--custom-safe-inset-right))
+      auto
+      auto;
     position: absolute;
   }
 
   .lightbox__figure {
-    align-self: stretch;
     animation-fill-mode: forwards;
     animation: slide-down var(--dialog-duration);
     display: flex;
@@ -72,6 +82,10 @@
     &:empty {
       display: none;
     }
+
+    &[tabindex="-1"]:focus-visible {
+      outline: unset;
+    }
   }
 
   .lightbox__image {

app/assets/stylesheets/native.css

@@ -1,11 +1,5 @@
 @layer native {
   [data-platform~=native] {
-    /* The mobile apps may inject their own custom insets based on native elements on screen, like a floating navigation */
-    --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
-    --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
-    --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));
-
     --footer-height: 0;
 
     -webkit-tap-highlight-color: transparent;
@@ -14,14 +8,28 @@
       display: none;
     }
 
+    /* Layout
+    /* ------------------------------------------------------------------------ */
+
+    &:not(.contained-scrolling) {
+      #main {
+        padding-block-end: var(--custom-safe-inset-bottom);
+      }
+    }
+
     /* 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;
+      block-size: var(--custom-safe-inset-top);
+      padding: unset;
+
+      * {
+        display: none;
+      }
     }
 
     .header__actions {
@@ -48,6 +56,11 @@
       }
     }
 
+    .card-perma__bg {
+      border-start-start-radius: calc(0.2em + clamp(0.25rem, 2vw, var(--padding-block)));
+      border-start-end-radius: calc(0.2em + clamp(0.25rem, 2vw, var(--padding-block)));
+    }
+
     .card-perma__closure-message {
       margin-block: var(--block-space);
       translate: unset;

app/assets/stylesheets/popup.css

@@ -27,13 +27,13 @@
     &:where(.popup--align-left),
     &.orient-left {
       inset-inline: auto 0;
-      transform: translateX(0);
+      transform: translateX(var(--orient-offset, 0px));
     }
 
     &:where(.popup--align-right),
     &.orient-right {
       inset-inline: 0 auto;
-      transform: translateX(0);
+      transform: translateX(var(--orient-offset, 0px));
     }
 
     form {

app/assets/stylesheets/settings.css

@@ -29,7 +29,9 @@
   }
 
   .settings__panel--users {
-    max-height: 80dvh;
+    @media (min-width: 640px) {
+      max-height: 80dvh;
+    }
 
     @media (min-width: 960px) {
       max-height: calc(100dvh - 12rem);

app/assets/stylesheets/tooltips.css

@@ -20,12 +20,12 @@
 
       &.orient-right {
         inset-inline: 0 auto;
-        translate: 0 -100%;
+        translate: var(--orient-offset, 0px) -100%;
       }
 
       &.orient-left {
         inset-inline: auto 0;
-        translate: 0 -100%;
+        translate: var(--orient-offset, 0px) -100%;
       }
     }
 

app/helpers/application_helper.rb

@@ -11,7 +11,7 @@ def icon_tag(name, **options)
   end
 
   def back_link_to(label, url, action, **options)
-    link_to url, class: "btn btn--back", data: { controller: "hotkey", action: action }, **options do
+    link_to url, class: "btn btn--back btn--circle-mobile", data: { controller: "hotkey", action: action }, **options do
       icon_tag("arrow-left") + tag.strong("Back to #{label}", class: "overflow-ellipsis") + tag.kbd("ESC", class: "txt-x-small hide-on-touch").html_safe
     end
   end

app/helpers/boards_helper.rb

@@ -4,7 +4,7 @@ def link_back_to_board(board)
   end
 
   def link_to_edit_board(board)
-    link_to edit_board_path(board), class: "btn",
+    link_to edit_board_path(board), class: "btn btn--circle-mobile",
       data: { controller: "tooltip", bridge__overflow_menu_target: "item", bridge_title: "Board settings" } do
       icon_tag("settings") + tag.span("Settings for #{board.name}", class: "for-screen-reader")
     end

app/helpers/webhooks_helper.rb

@@ -24,7 +24,7 @@ def webhook_action_label(action)
 
   def link_to_webhooks(board, &)
     link_to board_webhooks_path(board_id: board),
-        class: [ "btn", { "btn--reversed": board.webhooks.any? } ],
+        class: [ "btn btn--circle-mobile", { "btn--reversed": board.webhooks.any? } ],
         data: { controller: "tooltip", bridge__overflow_menu_target: "item", bridge_title: "Webhooks" } do
       icon_tag("world") + tag.span("Webhooks", class: "for-screen-reader")
     end

app/javascript/controllers/dialog_controller.js

@@ -26,7 +26,7 @@ export default class extends Controller {
       this.dialogTarget.showModal()
     } else {
       this.dialogTarget.show()
-      orient(this.dialogTarget)
+      orient({ target: this.dialogTarget, anchor: this.element })
     }
 
     this.loadLazyFrames()
@@ -46,7 +46,7 @@ export default class extends Controller {
     this.dialogTarget.close()
     this.dialogTarget.setAttribute("aria-hidden", "true")
     this.dialogTarget.blur()
-    orient(this.dialogTarget, false)
+    orient({ target: this.dialogTarget, reset: true })
     this.dispatch("close")
   }