From e8c2474fbfb2b68e7982e7bf1bafe4ea0156e9fa Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Wed, 7 Jan 2026 16:27:41 +0100
Subject: [PATCH 01/17] Move custom insets declaration to global css

---
 app/assets/stylesheets/_global.css | 6 ++++++
 app/assets/stylesheets/native.css  | 6 ------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 25bc182772..f426a042e2 100644
--- a/app/assets/stylesheets/_global.css
+++ b/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);
diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css
index 96df0e00ba..98622d74a0 100644
--- a/app/assets/stylesheets/native.css
+++ b/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));
-
     -webkit-tap-highlight-color: transparent;
 
     .hide-on-native {

From 589134591648d0e0b59005613c9bf3295bc90a49 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Wed, 7 Jan 2026 16:28:25 +0100
Subject: [PATCH 02/17] Use custom insets instead of env values

---
 app/assets/stylesheets/header.css | 2 +-
 app/assets/stylesheets/layout.css | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/header.css b/app/assets/stylesheets/header.css
index 5a3c7ee835..c54636d131 100644
--- a/app/assets/stylesheets/header.css
+++ b/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);
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index b9f8d63675..5caaa56c0c 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -13,8 +13,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;
   }
 

From 8508f1341a324cac1e8a4e6b2bd76ce3c43f73c7 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Wed, 7 Jan 2026 16:30:26 +0100
Subject: [PATCH 03/17] Hide the content of the header instead the header
 itself

... it has the top inset that prevents being under the navigation bar
---
 app/assets/stylesheets/native.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css
index 98622d74a0..2f75cfd7d4 100644
--- a/app/assets/stylesheets/native.css
+++ b/app/assets/stylesheets/native.css
@@ -13,7 +13,12 @@
       :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 {

From 241ce9fd7ac011d0d1c5e54bb2ade6ab83ac3ddf Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Wed, 7 Jan 2026 16:31:07 +0100
Subject: [PATCH 04/17] Tweak the top corners of the container on the card
 perma

---
 app/assets/stylesheets/native.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css
index 2f75cfd7d4..17129a9159 100644
--- a/app/assets/stylesheets/native.css
+++ b/app/assets/stylesheets/native.css
@@ -34,6 +34,11 @@
       margin-block-start: 0;
     }
 
+    .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)));
+    }
+
     /* Search
     /* ------------------------------------------------------------------------ */
 

From 8bf2397c4aebaa48279d0aaa0f4ea7630e014fd0 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Fri, 9 Jan 2026 11:57:16 +0100
Subject: [PATCH 05/17] Don't make all buttons bigger on mobile

---
 app/assets/stylesheets/buttons.css             | 13 +++----------
 app/helpers/application_helper.rb              |  2 +-
 app/helpers/boards_helper.rb                   |  2 +-
 app/helpers/webhooks_helper.rb                 |  2 +-
 app/views/boards/show/menu/_columns.html.erb   |  2 +-
 app/views/cards/container/_gild.html.erb       |  4 ++--
 app/views/cards/container/_image.html.erb      |  2 +-
 app/views/cards/pins/_pin_button.html.erb      |  4 ++--
 app/views/cards/watches/_watch_button.html.erb |  4 ++--
 app/views/notifications/index.html.erb         |  2 +-
 10 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 64ea77611a..07653e7faa 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -107,11 +107,6 @@
     > * {
       grid-area: 1/1;
     }
-
-    @media (max-width: 639px) {
-      --btn-size: 3em;
-      --icon-size: 70%;
-    }
   }
 
   /* 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;
       }
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 946a0900e5..9e0a72f813 100644
--- a/app/helpers/application_helper.rb
+++ b/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
diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb
index a1960b3410..4ed22dc032 100644
--- a/app/helpers/boards_helper.rb
+++ b/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", data: { controller: "tooltip" } do
+    link_to edit_board_path(board), class: "btn btn--circle-mobile", data: { controller: "tooltip" } do
       icon_tag("settings") + tag.span("Settings for #{board.name}", class: "for-screen-reader")
     end
   end
diff --git a/app/helpers/webhooks_helper.rb b/app/helpers/webhooks_helper.rb
index f3bb077c83..dea0ea9bd9 100644
--- a/app/helpers/webhooks_helper.rb
+++ b/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" } do
       icon_tag("world") + tag.span("Webhooks", class: "for-screen-reader")
     end
diff --git a/app/views/boards/show/menu/_columns.html.erb b/app/views/boards/show/menu/_columns.html.erb
index 017527a43c..b227b72efe 100644
--- a/app/views/boards/show/menu/_columns.html.erb
+++ b/app/views/boards/show/menu/_columns.html.erb
@@ -1,5 +1,5 @@
 <div class="cards__new-column" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" data-turbo-permanent>
-  <button class="btn btn--circle txt-x-small borderless" data-controller="tooltip" data-action="click->dialog#open:stop">
+  <button class="btn btn--circle btn--circle-mobile txt-x-small borderless" data-controller="tooltip" data-action="click->dialog#open:stop">
     <%= icon_tag "add", class: "translucent" %>
     <span class="for-screen-reader">Add a column</span>
   </button>
diff --git a/app/views/cards/container/_gild.html.erb b/app/views/cards/container/_gild.html.erb
index 7647a3b4ff..a54895a459 100644
--- a/app/views/cards/container/_gild.html.erb
+++ b/app/views/cards/container/_gild.html.erb
@@ -1,10 +1,10 @@
 <% if card.golden? %>
-  <%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed", data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click" } do %>
+  <%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click" } do %>
     <%= icon_tag "golden-ticket" %>
     <span class="for-screen-reader">Demote to normal (shift+g)</span>
   <% end %>
 <% else %>
-  <%= button_to card_goldness_path(card), class: "btn", data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click" } do %>
+  <%= button_to card_goldness_path(card), class: "btn btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click" } do %>
     <%= icon_tag "golden-ticket" %>
     <span class="for-screen-reader">Promote to Golden Ticket (shift+g)</span>
   <% end %>
diff --git a/app/views/cards/container/_image.html.erb b/app/views/cards/container/_image.html.erb
index 6f0fceea0e..87287cafea 100644
--- a/app/views/cards/container/_image.html.erb
+++ b/app/views/cards/container/_image.html.erb
@@ -5,7 +5,7 @@
   <% end %>
 <% elsif !card.closed? %>
   <%= form_with model: card, data: { controller: "form" } do |form| %>
-    <label class="card-perma__image-btn btn input--file" data-controller="tooltip">
+    <label class="card-perma__image-btn btn input--file btn--circle-mobile" data-controller="tooltip">
       <%= icon_tag "picture-add" %>
       <span class="for-screen-reader">Add background image</span>
 
diff --git a/app/views/cards/pins/_pin_button.html.erb b/app/views/cards/pins/_pin_button.html.erb
index 9e26872a4e..96ca1e8728 100644
--- a/app/views/cards/pins/_pin_button.html.erb
+++ b/app/views/cards/pins/_pin_button.html.erb
@@ -1,10 +1,10 @@
 <div id="<%= dom_id(card, :pin_button) %>">
   <% if card.pinned_by? Current.user %>
-    <%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed", data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click" } do %>
+    <%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click" } do %>
       <%= icon_tag "pinned" %> <span class="for-screen-reader">Un-pin this card (shift+p)</span>
     <% end %>
   <% else %>
-    <%= button_to card_pin_path(card), class: "btn", data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click" } do %>
+    <%= button_to card_pin_path(card), class: "btn btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click" } do %>
       <%= icon_tag "unpinned" %> <span class="for-screen-reader">Pin this card (shift+p)</span>
     <% end %>
   <% end %>
diff --git a/app/views/cards/watches/_watch_button.html.erb b/app/views/cards/watches/_watch_button.html.erb
index 3e1618ca30..5eb852f790 100644
--- a/app/views/cards/watches/_watch_button.html.erb
+++ b/app/views/cards/watches/_watch_button.html.erb
@@ -1,11 +1,11 @@
 <div id="<%= dom_id(card, :watch_button) %>">
   <% if card.watched_by? Current.user %>
-    <%= button_to card_watch_path(card), method: :delete, class: "btn btn--reversed", data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click" } do %>
+    <%= button_to card_watch_path(card), method: :delete, class: "btn btn--reversed btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click" } do %>
       <%= icon_tag "bell" %>
       <span class="for-screen-reader">Stop watching (shift+n)</span>
     <% end %>
   <% else %>
-    <%= button_to card_watch_path(card), class: "btn", data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click" } do %>
+    <%= button_to card_watch_path(card), class: "btn btn--circle-mobile", data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click" } do %>
       <%= icon_tag "bell-off" %>
       <span class="for-screen-reader">Watch this (shift+n)</span>
     <% end %>
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 7115367236..653c9b527a 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -9,7 +9,7 @@
   <h1 class="header__title"><%= @page_title %></h1>
 
   <div class="header__actions header__actions--end">
-    <%= link_to notifications_settings_path, class: "btn" do %>
+    <%= link_to notifications_settings_path, class: "btn btn--circle-mobile" do %>
       <%= icon_tag "settings" %> <span class="for-screen-reader">Notification settings</span>
     <% end %>
   </div>

From fb0ee93eb468e7712f7d1018565a69b366f021ff Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Fri, 9 Jan 2026 12:12:00 +0100
Subject: [PATCH 06/17] Don't max-height lists in settings on mobile

---
 app/assets/stylesheets/settings.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/settings.css b/app/assets/stylesheets/settings.css
index cd67a4cc0e..0f1822a234 100644
--- a/app/assets/stylesheets/settings.css
+++ b/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);

From 4a3e56047d230eeaf1d2dd27c11206bf8a20ecdb Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Fri, 9 Jan 2026 17:32:10 +0100
Subject: [PATCH 07/17] Fix sticky activity headers for iOS

---
 app/assets/stylesheets/events.css | 16 ++++++++++------
 app/assets/stylesheets/ios.css    | 10 ++++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 73e446185f..291d2ca47e 100644
--- a/app/assets/stylesheets/events.css
+++ b/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;
 
diff --git a/app/assets/stylesheets/ios.css b/app/assets/stylesheets/ios.css
index 3a05e5956b..6bd68634fe 100644
--- a/app/assets/stylesheets/ios.css
+++ b/app/assets/stylesheets/ios.css
@@ -3,5 +3,15 @@
     .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;
+    }
   }
 }

From 3a685ca2b95ec60a7110a343c368e6545d35a204 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Tue, 20 Jan 2026 13:39:00 +0100
Subject: [PATCH 08/17] Hide filters by default on mobile

---
 app/assets/images/funnel.svg                  |  1 +
 app/assets/stylesheets/expandable.css         | 13 +++++
 .../expandable_on_native_controller.js        | 16 ++++++
 app/javascript/helpers/platform_helpers.js    |  4 ++
 app/views/filters/_settings.html.erb          | 54 ++++++++++---------
 5 files changed, 64 insertions(+), 24 deletions(-)
 create mode 100644 app/assets/images/funnel.svg
 create mode 100644 app/assets/stylesheets/expandable.css
 create mode 100644 app/javascript/controllers/expandable_on_native_controller.js

diff --git a/app/assets/images/funnel.svg b/app/assets/images/funnel.svg
new file mode 100644
index 0000000000..26f3684d74
--- /dev/null
+++ b/app/assets/images/funnel.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23 0L1.00002 0C0.194222 0 -0.283458 0.955359 0.200023 1.6L9.00002 13.423V22C9.01178 23.585 10.9006 24.5769 12.2 23.6L14.2 22.1C14.696 21.7267 14.9989 21.1208 15 20.5V13.423L23.8 1.6C24.2835 0.955343 23.8058 2.70383e-05 23 0Z" fill="black"/></svg>
diff --git a/app/assets/stylesheets/expandable.css b/app/assets/stylesheets/expandable.css
new file mode 100644
index 0000000000..f2fe31c23e
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/app/javascript/controllers/expandable_on_native_controller.js b/app/javascript/controllers/expandable_on_native_controller.js
new file mode 100644
index 0000000000..a58ddfa9a1
--- /dev/null
+++ b/app/javascript/controllers/expandable_on_native_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+import { isNative } from "helpers/platform_helpers"
+
+export default class extends Controller {
+  static get shouldLoad() {
+    return isNative()
+  }
+
+  static values = { autoExpandSelector: String }
+
+  connect() {
+    if (this.hasAutoExpandSelectorValue && this.element.querySelector(this.autoExpandSelectorValue)) {
+      this.element.open = true
+    }
+  }
+}
diff --git a/app/javascript/helpers/platform_helpers.js b/app/javascript/helpers/platform_helpers.js
index 636e4b9681..b5056d5a6e 100644
--- a/app/javascript/helpers/platform_helpers.js
+++ b/app/javascript/helpers/platform_helpers.js
@@ -13,3 +13,7 @@ export function isAndroid() {
 export function isMobile() {
   return isIos() || isAndroid()
 }
+
+export function isNative() {
+  return /Hotwire Native/.test(navigator.userAgent)
+}
diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb
index 52137b5de5..66bbe3d54d 100644
--- a/app/views/filters/_settings.html.erb
+++ b/app/views/filters/_settings.html.erb
@@ -1,29 +1,35 @@
-<%= tag.aside \
-      class: class_names("filters margin-block-end", { "filters--expanded": user_filtering.expanded? }),
+<%= tag.details class: "expandable-on-native",
       data: {
-        controller: "toggle-enable toggle-class filter-settings dialog-manager",
-        toggle_class_toggle_class: "filters--expanded",
-        filter_settings_filters_set_class: "filters--has-filters-set",
-        filter_settings_no_filtering_url_value: no_filtering_url,
-        filter_settings_refresh_url_value: settings_refresh_path,
-        filter_settings_cards_url_value: cards_path,
-        turbo_permanent: true } do %>
-  <%= form_with url: filter_url, method: :get, class: "display-contents", data: {
-        controller: "form",
-        turbo_frame: "cards_container",
-        filter_settings_target: "form",
-        action: "turbo:submit-end->filter-settings#resetIfNoFiltering",
-        turbo_action: "advance" } do |form| %>
-    <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
+        controller: "expandable-on-native",
+        expandable_on_native_auto_expand_selector_value: "[data-filter-show=true]" } do %>
+    <%= tag.summary "Toggle filters", class: "btn btn--plain margin-block-end", data: { bridge__buttons_target: "button", bridge_title: "Toggle filters", bridge_icon_url: bridge_icon("funnel") } %>
+    <%= tag.aside \
+          class: class_names("filters margin-block-end", { "filters--expanded": user_filtering.expanded? }),
+          data: {
+            controller: "toggle-enable toggle-class filter-settings dialog-manager",
+            toggle_class_toggle_class: "filters--expanded",
+            filter_settings_filters_set_class: "filters--has-filters-set",
+            filter_settings_no_filtering_url_value: no_filtering_url,
+            filter_settings_refresh_url_value: settings_refresh_path,
+            filter_settings_cards_url_value: cards_path,
+            turbo_permanent: true } do %>
+      <%= form_with url: filter_url, method: :get, class: "display-contents", data: {
+            controller: "form",
+            turbo_frame: "cards_container",
+            filter_settings_target: "form",
+            action: "turbo:submit-end->filter-settings#resetIfNoFiltering",
+            turbo_action: "advance" } do |form| %>
+        <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
 
-    <%= yield form if block_given? %>
-
-      <%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %>
         <%= yield form if block_given? %>
-      <% end %>
-      <%= render "filters/settings/controls", user_filtering: user_filtering, form: form %>
 
-      <%= render "filters/settings/toggle", user_filtering: user_filtering %>
-  <% end %>
-  <%= render "filters/settings/manage", user_filtering: user_filtering, no_filtering_url: no_filtering_url %>
+          <%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %>
+            <%= yield form if block_given? %>
+          <% end %>
+          <%= render "filters/settings/controls", user_filtering: user_filtering, form: form %>
+
+          <%= render "filters/settings/toggle", user_filtering: user_filtering %>
+      <% end %>
+      <%= render "filters/settings/manage", user_filtering: user_filtering, no_filtering_url: no_filtering_url %>
+    <% end %>
 <% end %>

From 8c5ce3487e464c24aba177bb338035b83834baf0 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Tue, 20 Jan 2026 15:43:39 +0100
Subject: [PATCH 09/17] Remove keyboard shortcut from input's placeholder on
 mobile

---
 .../controllers/touch_placeholder_controller.js  | 16 ++++++++++++++++
 app/views/filters/settings/_terms.html.erb       |  3 ++-
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/controllers/touch_placeholder_controller.js

diff --git a/app/javascript/controllers/touch_placeholder_controller.js b/app/javascript/controllers/touch_placeholder_controller.js
new file mode 100644
index 0000000000..f1798873e6
--- /dev/null
+++ b/app/javascript/controllers/touch_placeholder_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+import { isTouchDevice } from "helpers/platform_helpers"
+
+export default class extends Controller {
+  static get shouldLoad() {
+    return isTouchDevice()
+  }
+
+  static values = { placeholder: String }
+
+  connect() {
+    if (this.hasPlaceholderValue) {
+      this.element.placeholder = this.placeholderValue
+    }
+  }
+}
diff --git a/app/views/filters/settings/_terms.html.erb b/app/views/filters/settings/_terms.html.erb
index 237eea809e..c7133e11a8 100644
--- a/app/views/filters/settings/_terms.html.erb
+++ b/app/views/filters/settings/_terms.html.erb
@@ -1,8 +1,9 @@
 <%= form.search_field "terms[]", placeholder: "Filter these cards… [F]", class: "filter__terms input txt-x-small",
       autofocus: false, autocomplete: :off, autocorrect: "off", data: {
             "1p-ignore": "true",
-            controller: "hotkey",
+            controller: "hotkey touch-placeholder",
             filter_settings_target: "field",
+            touch_placeholder_placeholder_value: "Filter these cards…",
             action: "keydown.f@document->hotkey#focus input->filter-settings#resetIfNoFiltering input->form#debouncedSubmit keydown.enter->form#submitToTopTarget blur->form#submitToTopTarget" } %>
 
 <% if filter.terms.present? %>

From 7e84e44872bd7d74035b898bac85ec842562bdcf Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Tue, 20 Jan 2026 17:46:05 +0100
Subject: [PATCH 10/17] Support system font sizes on iOS

---
 app/assets/stylesheets/ios.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/assets/stylesheets/ios.css b/app/assets/stylesheets/ios.css
index 6bd68634fe..49d66e602c 100644
--- a/app/assets/stylesheets/ios.css
+++ b/app/assets/stylesheets/ios.css
@@ -1,4 +1,12 @@
 @layer platform {
+  :root[data-text-size=xsmall]:has([data-platform~=ios]) { font-size: 14px; }
+  :root[data-text-size=small]:has([data-platform~=ios]) { font-size: 15px; }
+  :root[data-text-size=medium]:has([data-platform~=ios]) { font-size: 16px; }
+  :root[data-text-size=large]:has([data-platform~=ios]) { font-size: 17px; }
+  :root[data-text-size=xlarge]:has([data-platform~=ios]) { font-size: 19px; }
+  :root[data-text-size=xxlarge]:has([data-platform~=ios]) { font-size: 21px; }
+  :root[data-text-size=xxxlarge]:has([data-platform~=ios]) { font-size: 23px; }
+
   [data-platform~=ios] {
     .hide-on-ios {
       display: none;

From 4519d75c243b63665c0e7cb4c5058fe0c15b74f0 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Tue, 20 Jan 2026 18:12:51 +0100
Subject: [PATCH 11/17] Bump filters font-size on Android

---
 app/assets/stylesheets/android.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/assets/stylesheets/android.css b/app/assets/stylesheets/android.css
index f30158e8ef..7bf6c0085b 100644
--- a/app/assets/stylesheets/android.css
+++ b/app/assets/stylesheets/android.css
@@ -3,5 +3,12 @@
     .hide-on-android {
       display: none;
     }
+
+    /* Filters
+    /* ------------------------------------------------------------------------ */
+
+    .filters {
+      --text-x-small: 1rem;
+    }
   }
 }

From 97a1c29b0cd26b2d8521d7b3226addb055d97576 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Fri, 23 Jan 2026 12:15:31 +0100
Subject: [PATCH 12/17] Use bottom inset

... fixes content being stuck behind the tab bar in apps
---
 app/assets/stylesheets/card-columns.css | 2 +-
 app/assets/stylesheets/native.css       | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 3409b83dea..c438efa263 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/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) {
diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css
index 6e2e129812..c67d05d149 100644
--- a/app/assets/stylesheets/native.css
+++ b/app/assets/stylesheets/native.css
@@ -8,6 +8,15 @@
       display: none;
     }
 
+    /* Layout
+    /* ------------------------------------------------------------------------ */
+
+    &:not(.contained-scrolling) {
+      #main {
+        padding-block-end: var(--custom-safe-inset-bottom);
+      }
+    }
+
     /* Header
     /* ------------------------------------------------------------------------ */
 

From 65b2db0ec89dc3a0bdbad22e3c7202b2cb4022b4 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Fri, 23 Jan 2026 12:58:42 +0100
Subject: [PATCH 13/17] Add vertically compact layout for touch keyboard
 devices

---
 app/assets/stylesheets/layout.css | 7 +++++++
 app/views/boards/new.html.erb     | 1 +
 2 files changed, 8 insertions(+)

diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index ef65d7b6b6..f789f7ceb7 100644
--- a/app/assets/stylesheets/layout.css
+++ b/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 */
diff --git a/app/views/boards/new.html.erb b/app/views/boards/new.html.erb
index 928237a84c..5058d6455e 100644
--- a/app/views/boards/new.html.erb
+++ b/app/views/boards/new.html.erb
@@ -1,4 +1,5 @@
 <% @page_title = "Create a new board" %>
+<% @body_class = "compact-on-touch" %>
 
 <div class="panel panel--centered">
   <%= bridged_form_with model: @board, class: "flex flex-column gap", data: { controller: "form", action: "submit->form#preventEmptySubmit" } do |form| %>

From 764eb8987a0a943d94bb45820c9cccf330ccc2cb Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Fri, 23 Jan 2026 14:06:17 +0100
Subject: [PATCH 14/17] Tweak orientation helper to prevent popups from going
 off screen

---
 app/assets/stylesheets/popup.css              |  4 +--
 app/assets/stylesheets/tooltips.css           |  4 +--
 .../controllers/dialog_controller.js          |  4 +--
 .../controllers/tooltip_controller.js         |  4 +--
 app/javascript/helpers/orientation_helpers.js | 36 +++++++++++--------
 5 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index aa0b8c1daf..6e2720637c 100644
--- a/app/assets/stylesheets/popup.css
+++ b/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 {
diff --git a/app/assets/stylesheets/tooltips.css b/app/assets/stylesheets/tooltips.css
index f6ff54ffc3..ab142afdc8 100644
--- a/app/assets/stylesheets/tooltips.css
+++ b/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%;
       }
     }
 
diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index 037c5ec7b5..b52eb2ea6f 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/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")
   }
 
diff --git a/app/javascript/controllers/tooltip_controller.js b/app/javascript/controllers/tooltip_controller.js
index 0b242f157e..57958cd15e 100644
--- a/app/javascript/controllers/tooltip_controller.js
+++ b/app/javascript/controllers/tooltip_controller.js
@@ -15,11 +15,11 @@ export default class extends Controller {
   }
 
   mouseEnter(event) {
-    orient(this.#tooltipElement)
+    orient({ target: this.#tooltipElement, anchor: this.element })
   }
 
   mouseOut(event) {
-    orient(this.#tooltipElement, false)
+    orient({ target: this.#tooltipElement, reset: true })
   }
 
   get #tooltipElement() {
diff --git a/app/javascript/helpers/orientation_helpers.js b/app/javascript/helpers/orientation_helpers.js
index b79d663601..c63da2fca4 100644
--- a/app/javascript/helpers/orientation_helpers.js
+++ b/app/javascript/helpers/orientation_helpers.js
@@ -1,24 +1,30 @@
 const EDGE_THRESHOLD = 16
 
-export function orient(el, orient = true) {
-  el.classList.remove("orient-left", "orient-right")
+export function orient({ target, anchor = null, reset = false }) {
+  target.classList.remove("orient-left", "orient-right")
+  target.style.removeProperty("--orient-offset")
 
-  if (!orient) return
+  if (reset) return
 
-  const rightSpace = spaceOnRight(el)
-  const leftSpace = spaceOnLeft(el)
+  const targetGeometry = geometry(target)
+  const anchorGeometry = geometry(anchor)
 
-  if (rightSpace < EDGE_THRESHOLD && rightSpace < leftSpace) {
-    el.classList.add("orient-left")
-  } else if (leftSpace < EDGE_THRESHOLD && leftSpace < rightSpace) {
-    el.classList.add("orient-right")
+  if (targetGeometry.spaceOnRight < EDGE_THRESHOLD && targetGeometry.spaceOnRight < targetGeometry.spaceOnLeft) {
+    const offset = Math.min(0, anchorGeometry.spaceOnLeft + anchorGeometry.width - targetGeometry.width) * -1
+    target.classList.add("orient-left")
+    target.style.setProperty("--orient-offset", `${offset}px`)
+  } else if (targetGeometry.spaceOnLeft < EDGE_THRESHOLD && targetGeometry.spaceOnLeft < targetGeometry.spaceOnRight) {
+    const offset = Math.max(0, anchorGeometry.spaceOnLeft + targetGeometry.width - window.innerWidth) * -1
+    target.classList.add("orient-right")
+    target.style.setProperty("--orient-offset", `${offset}px`)
   }
 }
 
-function spaceOnLeft(el) {
-  return el.getBoundingClientRect().left
-}
-
-function spaceOnRight(el) {
-  return window.innerWidth - el.getBoundingClientRect().right
+function geometry(el) {
+  const rect = el.getBoundingClientRect()
+  return {
+    spaceOnLeft: rect.left,
+    spaceOnRight: window.innerWidth - rect.right,
+    width: rect.width
+  }
 }

From 39575a0cb6c94cb9d32ed2d4208bf2567a268d84 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Fri, 23 Jan 2026 17:41:33 +0100
Subject: [PATCH 15/17] Fix lightbox layout and focus

---
 app/assets/stylesheets/lightbox.css           | 20 ++++++++++++++++---
 .../controllers/lightbox_controller.js        |  2 +-
 app/views/layouts/_lightbox.html.erb          |  4 ++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index 65144a22bd..b1b73af513 100644
--- a/app/assets/stylesheets/lightbox.css
+++ b/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 {
diff --git a/app/javascript/controllers/lightbox_controller.js b/app/javascript/controllers/lightbox_controller.js
index fc86b18f73..a30d5dd233 100644
--- a/app/javascript/controllers/lightbox_controller.js
+++ b/app/javascript/controllers/lightbox_controller.js
@@ -30,7 +30,7 @@ export default class extends Controller {
 
   reset() {
     this.zoomedImageTarget.src = ""
-    this.captionTarget.innerText = ""
+    this.captionTarget.innerHtml = "&nbsp;"
     this.dispatch('closed')
   }
 
diff --git a/app/views/layouts/_lightbox.html.erb b/app/views/layouts/_lightbox.html.erb
index 74f5597a9d..b469377cae 100644
--- a/app/views/layouts/_lightbox.html.erb
+++ b/app/views/layouts/_lightbox.html.erb
@@ -3,12 +3,12 @@
 
   <figure class="lightbox__figure">
     <img src="" class="lightbox__image" data-lightbox-target="zoomedImage" />
-    <figcaption class="lightbox__caption" data-lightbox-target="caption"></figcaption>
+    <figcaption class="lightbox__caption" data-lightbox-target="caption" tabindex="-1" data-dialog-target="focusTouch">&nbsp</figcaption>
   </figure>
 
   <div class="lightbox__actions">
     <%= yield %>
-    <button class="btn fill-white" data-action="dialog#close" data-controller="hotkey tooltip">
+    <button class="btn fill-white" data-action="dialog#close" data-controller="hotkey tooltip" data-dialog-target="focusMouse">
       <%= icon_tag "remove" %>
       <span class="for-screen-reader">Close (esc)</span>
     </button>

From e5bef41c5497a2b79d11f719f21ec81beb7d14e1 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Tue, 27 Jan 2026 11:21:15 +0100
Subject: [PATCH 16/17] Refactor orientation helper to express intent more
 clearly

---
 app/javascript/helpers/orientation_helpers.js | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/javascript/helpers/orientation_helpers.js b/app/javascript/helpers/orientation_helpers.js
index c63da2fca4..f823de09ab 100644
--- a/app/javascript/helpers/orientation_helpers.js
+++ b/app/javascript/helpers/orientation_helpers.js
@@ -8,18 +8,28 @@ export function orient({ target, anchor = null, reset = false }) {
 
   const targetGeometry = geometry(target)
   const anchorGeometry = geometry(anchor)
+  const shouldOrientLeft = targetGeometry.spaceOnRight < EDGE_THRESHOLD && targetGeometry.spaceOnRight < targetGeometry.spaceOnLeft
+  const shouldOrientRight = targetGeometry.spaceOnLeft < EDGE_THRESHOLD && targetGeometry.spaceOnLeft < targetGeometry.spaceOnRight
 
-  if (targetGeometry.spaceOnRight < EDGE_THRESHOLD && targetGeometry.spaceOnRight < targetGeometry.spaceOnLeft) {
-    const offset = Math.min(0, anchorGeometry.spaceOnLeft + anchorGeometry.width - targetGeometry.width) * -1
-    target.classList.add("orient-left")
-    target.style.setProperty("--orient-offset", `${offset}px`)
-  } else if (targetGeometry.spaceOnLeft < EDGE_THRESHOLD && targetGeometry.spaceOnLeft < targetGeometry.spaceOnRight) {
-    const offset = Math.max(0, anchorGeometry.spaceOnLeft + targetGeometry.width - window.innerWidth) * -1
-    target.classList.add("orient-right")
-    target.style.setProperty("--orient-offset", `${offset}px`)
+  if (shouldOrientLeft) {
+    orientLeft({ el: target, targetGeometry, anchorGeometry })
+  } else if (shouldOrientRight) {
+    orientRight({ el: target, targetGeometry, anchorGeometry })
   }
 }
 
+function orientLeft({ el, targetGeometry, anchorGeometry }) {
+  const offset = Math.min(0, anchorGeometry.spaceOnLeft + anchorGeometry.width - targetGeometry.width) * -1
+  el.classList.add("orient-left")
+  el.style.setProperty("--orient-offset", `${offset}px`)
+}
+
+function orientRight({ el, targetGeometry, anchorGeometry }) {
+  const offset = Math.max(0, anchorGeometry.spaceOnLeft + targetGeometry.width - window.innerWidth) * -1
+  el.classList.add("orient-right")
+  el.style.setProperty("--orient-offset", `${offset}px`)
+}
+
 function geometry(el) {
   const rect = el.getBoundingClientRect()
   return {

From 70fc2a807cdc8c34ee4f2cfe5ce7587a271a2b99 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Tue, 27 Jan 2026 11:38:04 +0100
Subject: [PATCH 17/17] Clean iOS text size CSS

---
 app/assets/stylesheets/ios.css | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/ios.css b/app/assets/stylesheets/ios.css
index 49d66e602c..2242e7c770 100644
--- a/app/assets/stylesheets/ios.css
+++ b/app/assets/stylesheets/ios.css
@@ -1,11 +1,13 @@
 @layer platform {
-  :root[data-text-size=xsmall]:has([data-platform~=ios]) { font-size: 14px; }
-  :root[data-text-size=small]:has([data-platform~=ios]) { font-size: 15px; }
-  :root[data-text-size=medium]:has([data-platform~=ios]) { font-size: 16px; }
-  :root[data-text-size=large]:has([data-platform~=ios]) { font-size: 17px; }
-  :root[data-text-size=xlarge]:has([data-platform~=ios]) { font-size: 19px; }
-  :root[data-text-size=xxlarge]:has([data-platform~=ios]) { font-size: 21px; }
-  :root[data-text-size=xxxlarge]:has([data-platform~=ios]) { font-size: 23px; }
+  :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 {