diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 073508bff6..d3b671b9aa 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -281,10 +281,7 @@
 
     /* Overlap the card BG by half the button height */
     &:has(.btn) {
-      &,
-      ~ .card-perma__closure-message {
-        translate: 0 calc(-1 * var(--half-btn-height));
-      }
+      translate: 0 calc(-1 * var(--half-btn-height));
     }
 
     form {
@@ -297,12 +294,6 @@
       --btn-color: var(--color-ink-inverted);
     }
 
-    .btn--plain {
-      --btn-color: var(--card-color);
-
-      text-decoration: underline;
-    }
-
     .btn--reversed {
       --btn-background: var(--color-canvas);
       --btn-color: var(--card-color);
@@ -330,11 +321,25 @@
   .card-perma__closure-message {
     color: var(--card-color);
     grid-area: closure-message;
-    margin-block-start: 0.5ch;
+    margin-block: var(--block-space) var(--block-space-double);
     padding-inline: 1ch;
 
-    form {
-      display: inline;
+    .btn--plain {
+      --btn-color: var(--card-color);
+
+      text-decoration: underline;
+    }
+
+    @media (max-width: 799px) {
+      margin-block: var(--block-space-half);
+      translate: 0 calc(-0.5 * var(--half-btn-height));
+    }
+
+    @media (min-width: 800px) {
+      .card-perma__notch--bottom:has(.btn) ~ & {
+        margin-block: var(--block-space-half) var(--block-space);
+        translate: 0 calc(-0.5 * var(--half-btn-height));
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css
index 96df0e00ba..8226a52612 100644
--- a/app/assets/stylesheets/native.css
+++ b/app/assets/stylesheets/native.css
@@ -6,6 +6,8 @@
     --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;
 
     .hide-on-native {
@@ -28,11 +30,27 @@
       }
     }
 
+    /* Card columns
+    /* ------------------------------------------------------------------------ */
+
+    .board-tools.card {
+      padding-block-start: 0;
+    }
+
     /* Card perma
     /* ------------------------------------------------------------------------ */
 
     .card-perma {
       margin-block-start: 0;
+
+      &:not(:has(.card-perma__notch-new-card-buttons)) .card-perma__bg {
+        padding-block: clamp(0.25rem, 2vw, var(--padding-block));
+      }
+    }
+
+    .card-perma__closure-message {
+      margin-block: var(--block-space);
+      translate: unset;
     }
 
     /* Search
@@ -43,3 +61,25 @@
     }
   }
 }
+
+[data-bridge-components~=form] {
+  [data-controller~=bridge--form] {
+    [data-bridge--form-target~=submit] {
+      display: none;
+    }
+  }
+}
+
+[data-bridge-components~=overflow-menu] {
+  [data-controller~=bridge--overflow-menu] {
+    [data-bridge--overflow-menu-target~=item] {
+      display: none;
+    }
+  }
+}
+
+[data-bridge-components~=buttons] {
+  [data-bridge--buttons-target~=button] {
+    display: none;
+  }
+}
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index e27494153b..aa0b8c1daf 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -53,6 +53,10 @@
   .popup__title {
     font-weight: 800;
     white-space: nowrap;
+
+    &[tabindex="-1"]:focus-visible {
+      outline: unset;
+    }
   }
 
   /* Hide lists when all the items within are hidden */
diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb
index 1ace03574d..c5a4ae1c62 100644
--- a/app/helpers/accesses_helper.rb
+++ b/app/helpers/accesses_helper.rb
@@ -48,7 +48,8 @@ def involvement_button(board, access, show_watchers, icon_only)
       params: { show_watchers: show_watchers, involvement: next_involvement(access.involvement), icon_only: icon_only },
       aria: { labelledby: dom_id(board, :involvement_label) },
       title: (label_text if icon_only),
-      class: class_names("btn", { "btn--reversed": access.watching? && icon_only })) do
+      class: class_names("btn", { "btn--reversed": access.watching? && icon_only }),
+      data: !icon_only && { bridge__overflow_menu_target: "item", bridge_title: label_text }) do
         icon_tag("notification-bell-#{icon_only ? 'reverse-' : nil}#{access.involvement.dasherize}") +
         tag.span(label_text, class: class_names("txt-nowrap txt-uppercase", "for-screen-reader": icon_only), id: dom_id(board, :involvement_label))
     end
diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb
index a1960b3410..9b9ee89b36 100644
--- a/app/helpers/boards_helper.rb
+++ b/app/helpers/boards_helper.rb
@@ -4,7 +4,8 @@ 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",
+      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
   end
diff --git a/app/helpers/bridge_helper.rb b/app/helpers/bridge_helper.rb
new file mode 100644
index 0000000000..5fb4508b69
--- /dev/null
+++ b/app/helpers/bridge_helper.rb
@@ -0,0 +1,5 @@
+module BridgeHelper
+  def bridge_icon(name)
+    asset_url("#{name}.svg")
+  end
+end
diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb
index 6c3f01725e..a0529b11a1 100644
--- a/app/helpers/filters_helper.rb
+++ b/app/helpers/filters_helper.rb
@@ -40,6 +40,10 @@ def filter_dialog(label, &block)
     }, &block
   end
 
+  def filter_title(title)
+    tag.strong title, class: "popup__title pad-inline-half", tabindex: "-1", data: { dialog_target: "focusTouch" }
+  end
+
   def collapsible_nav_section(title, **properties, &block)
     tag.details class: "nav__section popup__section", data: { action: "toggle->nav-section-expander#toggle", nav_section_expander_target: "section", nav_section_expander_key_value: title.parameterize }, open: true, **properties do
       concat(tag.summary(class: "popup__section-title") do
diff --git a/app/helpers/forms_helper.rb b/app/helpers/forms_helper.rb
index 095655e3b6..2902f809d8 100644
--- a/app/helpers/forms_helper.rb
+++ b/app/helpers/forms_helper.rb
@@ -9,4 +9,23 @@ def auto_submit_form_with(**attributes, &)
       form_with(**attributes, data: data) { }
     end
   end
+
+  def bridged_form_with(**attributes, &)
+    data = attributes.delete(:data) || {}
+    controllers = [ data[:controller], "bridge--form" ].compact.join(" ").strip
+    actions = [
+      data[:action],
+      "turbo:submit-start->bridge--form#submitStart",
+      "turbo:submit-end->bridge--form#submitEnd"
+    ].compact.join(" ").strip
+
+    data[:controller] = controllers
+    data[:action] = actions
+
+    if block_given?
+      form_with **attributes, data: data, &
+    else
+      form_with(**attributes, data: data) { }
+    end
+  end
 end
diff --git a/app/helpers/webhooks_helper.rb b/app/helpers/webhooks_helper.rb
index f3bb077c83..a2e14af29a 100644
--- a/app/helpers/webhooks_helper.rb
+++ b/app/helpers/webhooks_helper.rb
@@ -25,7 +25,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? } ],
-        data: { controller: "tooltip" } do
+        data: { controller: "tooltip", bridge__overflow_menu_target: "item", bridge_title: "Webhooks" } do
       icon_tag("world") + tag.span("Webhooks", class: "for-screen-reader")
     end
   end
diff --git a/app/javascript/application.js b/app/javascript/application.js
index bdafb95b09..c43a45eaa6 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,8 +1,8 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
+import "@hotwired/hotwire-native-bridge"
 import "initializers"
 import "controllers"
 
 import "lexxy"
 import "@rails/actiontext"
-
diff --git a/app/javascript/controllers/bridge/buttons_controller.js b/app/javascript/controllers/bridge/buttons_controller.js
new file mode 100644
index 0000000000..47d09a158f
--- /dev/null
+++ b/app/javascript/controllers/bridge/buttons_controller.js
@@ -0,0 +1,43 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "buttons"
+  static targets = [ "button" ]
+
+  buttonTargetConnected() {
+    this.notifyBridgeOfConnect()
+  }
+
+  buttonTargetDisconnected() {
+    if (!this.#isControllerTearingDown()) {
+      this.notifyBridgeOfConnect()
+    }
+  }
+
+  notifyBridgeOfConnect() {
+    const buttons = this.#enabledButtonTargets
+      .map((target, index) => {
+        const element = new BridgeElement(target)
+        return { ...element.getButton(), index }
+    })
+
+    this.send("connect", { buttons }, message => {
+      this.#clickButton(message)
+    })
+  }
+
+  #clickButton(message) {
+    const selectedIndex = message.data.selectedIndex
+    this.#enabledButtonTargets[selectedIndex].click()
+  }
+
+  get #enabledButtonTargets() {
+    return this.buttonTargets
+      .filter(target => !target.closest("[data-bridge-disabled]"))
+  }
+
+  #isControllerTearingDown() {
+    return !document.body.contains(this.element)
+  }
+}
diff --git a/app/javascript/controllers/bridge/form_controller.js b/app/javascript/controllers/bridge/form_controller.js
new file mode 100644
index 0000000000..a3c780e62a
--- /dev/null
+++ b/app/javascript/controllers/bridge/form_controller.js
@@ -0,0 +1,62 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "form"
+  static targets = [ "submit", "cancel" ]
+  static values = { submitTitle: String }
+
+  submitTargetConnected() {
+    this.notifyBridgeOfConnect()
+    this.#observeSubmitTarget()
+  }
+
+  submitTargetDisconnected() {
+    this.notifyBridgeOfDisonnect()
+    this.submitObserver?.disconnect()
+  }
+
+  notifyBridgeOfConnect() {
+    const submitElement = new BridgeElement(this.submitTarget)
+    const cancelElement = this.hasCancelTarget ? new BridgeElement(this.cancelTarget) : null
+
+    const submitButton = { title: submitElement.title }
+    const cancelButton = cancelElement ? { title: cancelElement.title } : null
+
+    this.send("connect", { submitButton, cancelButton }, message => this.receive(message))
+  }
+
+  receive(message) {
+    switch (message.event) {
+      case "submit":
+        this.submitTarget.click()
+        break
+      case "cancel":
+        this.cancelTarget.click()
+        break
+    }
+  }
+
+  notifyBridgeOfDisonnect() {
+    this.send("disconnect")
+  }
+
+  submitStart() {
+    this.send("submitStart")
+  }
+
+  submitEnd() {
+    this.send("submitEnd")
+  }
+
+  #observeSubmitTarget() {
+    this.submitObserver = new MutationObserver(() => {
+      this.send(this.submitTarget.disabled ? "submitDisabled" : "submitEnabled")
+    })
+
+    this.submitObserver.observe(this.submitTarget, {
+      attributes: true,
+      attributeFilter: [ "disabled" ]
+    })
+  }
+}
diff --git a/app/javascript/controllers/bridge/insets_controller.js b/app/javascript/controllers/bridge/insets_controller.js
new file mode 100644
index 0000000000..1cef156906
--- /dev/null
+++ b/app/javascript/controllers/bridge/insets_controller.js
@@ -0,0 +1,31 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+
+// Bridge component to control custom safe-area insets from native apps.
+// Sets CSS variables --injected-safe-inset-(top|right|bottom|left).
+export default class extends BridgeComponent {
+  static component = "insets"
+
+  connect() {
+    super.connect()
+    this.notifyBridgeOfConnect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.send("disconnect")
+  }
+
+  notifyBridgeOfConnect() {
+    this.send("connect", {}, message => {
+      this.#setInsets(message.data)
+    })
+  }
+
+  #setInsets({ top, right, bottom, left }) {
+    const root = document.documentElement.style
+    root.setProperty("--injected-safe-inset-top", `${top}px`)
+    root.setProperty("--injected-safe-inset-right", `${right}px`)
+    root.setProperty("--injected-safe-inset-bottom", `${bottom}px`)
+    root.setProperty("--injected-safe-inset-left", `${left}px`)
+  }
+}
diff --git a/app/javascript/controllers/bridge/overflow_menu_controller.js b/app/javascript/controllers/bridge/overflow_menu_controller.js
new file mode 100644
index 0000000000..ba2045dc61
--- /dev/null
+++ b/app/javascript/controllers/bridge/overflow_menu_controller.js
@@ -0,0 +1,43 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "overflow-menu"
+  static targets = [ "item" ]
+
+  itemTargetConnected() {
+    this.notifyBridgeOfConnect()
+  }
+
+  itemTargetDisconnected() {
+    if (!this.#isControllerTearingDown) {
+      this.notifyBridgeOfConnect()
+    }
+  }
+
+  notifyBridgeOfConnect() {
+    const items = this.#enabledItemTargets
+      .map((target, index) => {
+        const element = new BridgeElement(target)
+        return { title: element.title, index }
+      })
+
+    this.send("connect", { items }, message => {
+      this.#clickItem(message)
+    })
+  }
+
+  #clickItem(message) {
+    const selectedIndex = message.data.selectedIndex
+    this.#enabledItemTargets[selectedIndex].click()
+  }
+
+  get #enabledItemTargets() {
+    return this.itemTargets
+      .filter(target => !target.closest("[data-bridge-disabled]"))
+  }
+
+  #isControllerTearingDown() {
+    return !document.body.contains(this.element)
+  }
+}
diff --git a/app/javascript/controllers/bridge/text_size_controller.js b/app/javascript/controllers/bridge/text_size_controller.js
new file mode 100644
index 0000000000..a464b8d45b
--- /dev/null
+++ b/app/javascript/controllers/bridge/text_size_controller.js
@@ -0,0 +1,25 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "text-size"
+
+  connect() {
+    super.connect()
+    this.notifyBridgeOfConnect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.send("disconnect")
+  }
+
+  notifyBridgeOfConnect() {
+    this.send("connect", {}, message => {
+      this.#setTextSize(message.data)
+    })
+  }
+
+  #setTextSize(data) {
+    document.documentElement.dataset.textSize = data.textSize
+  }
+}
diff --git a/app/javascript/controllers/bridge/title_controller.js b/app/javascript/controllers/bridge/title_controller.js
new file mode 100644
index 0000000000..f2226be350
--- /dev/null
+++ b/app/javascript/controllers/bridge/title_controller.js
@@ -0,0 +1,63 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { viewport } from "helpers/bridge/viewport_helpers"
+import { nextFrame } from "helpers/timing_helpers"
+
+export default class extends BridgeComponent {
+  static component = "title"
+  static targets = [ "header" ]
+  static values = { title: String }
+
+  async connect() {
+    super.connect()
+    await nextFrame()
+    this.#startObserver()
+    window.addEventListener("resize", this.#windowResized)
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.#stopObserver()
+    window.removeEventListener("resize", this.#windowResized)
+  }
+
+  notifyBridgeOfVisibilityChange(visible) {
+    this.send("visibility", { title: this.#title, elementVisible: visible })
+  }
+
+  // Intersection Observer
+
+  #startObserver() {
+    if (!this.hasHeaderTarget) return
+
+    this.observer = new IntersectionObserver(([ entry ]) =>
+      this.notifyBridgeOfVisibilityChange(entry.isIntersecting),
+      { rootMargin: `-${this.#topOffset}px 0px 0px 0px` }
+    )
+
+    this.observer.observe(this.headerTarget)
+    this.previousTopOffset = this.#topOffset
+  }
+
+  #stopObserver() {
+    this.observer?.disconnect()
+  }
+
+  #updateObserverIfNeeded() {
+    if (this.#topOffset === this.previousTopOffset) return
+
+    this.#stopObserver()
+    this.#startObserver()
+  }
+
+  #windowResized = () => {
+    this.#updateObserverIfNeeded()
+  }
+
+  get #title() {
+    return this.titleValue ? this.titleValue : document.title
+  }
+
+  get #topOffset() {
+    return viewport.top
+  }
+}
diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index f6449cea7b..037c5ec7b5 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -1,8 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
 import { orient } from "helpers/orientation_helpers"
+import { isTouchDevice } from "helpers/platform_helpers"
 
 export default class extends Controller {
-  static targets = [ "dialog" ]
+  static targets = [ "dialog", "focusMouse", "focusTouch" ]
   static values = {
     modal: { type: Boolean, default: false },
     sizing: { type: Boolean, default: true },
@@ -14,6 +15,10 @@ export default class extends Controller {
     if (this.autoOpenValue) this.open()
   }
 
+  focusTouchTargetConnected() {
+    this.#setupFocus()
+  }
+
   open() {
     const modal = this.modalValue
 
@@ -63,4 +68,10 @@ export default class extends Controller {
   captureKey(event) {
     if (event.key !== "Escape") { event.stopPropagation() }
   }
+
+  #setupFocus() {
+    const touch = isTouchDevice()
+    if (this.hasFocusMouseTarget) this.focusMouseTarget.autofocus = !touch
+    if (this.hasFocusTouchTarget) this.focusTouchTarget.autofocus = touch
+  }
 }
diff --git a/app/javascript/helpers/bridge/viewport_helpers.js b/app/javascript/helpers/bridge/viewport_helpers.js
new file mode 100644
index 0000000000..559143607e
--- /dev/null
+++ b/app/javascript/helpers/bridge/viewport_helpers.js
@@ -0,0 +1,24 @@
+let top = 0
+const viewportTarget = window.visualViewport || window
+
+export const viewport = {
+  get top() {
+    return top
+  },
+  get height() {
+    return viewportTarget.height || window.innerHeight
+  }
+}
+
+function update() {
+  requestAnimationFrame(() => {
+    const styles = getComputedStyle(document.documentElement)
+    const customInset = styles.getPropertyValue("--custom-safe-inset-top")
+    const fallbackInset = styles.getPropertyValue("--safe-area-inset-top")
+    const insetValue = (customInset || fallbackInset).trim()
+    top = parseInt(insetValue || "0", 10) || 0
+  })
+}
+
+viewportTarget.addEventListener("resize", update)
+update()
diff --git a/app/javascript/initializers/bridge/bridge_element.js b/app/javascript/initializers/bridge/bridge_element.js
new file mode 100644
index 0000000000..7ddeb1b335
--- /dev/null
+++ b/app/javascript/initializers/bridge/bridge_element.js
@@ -0,0 +1,18 @@
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+BridgeElement.prototype.getButton = function() {
+  return {
+    title: this.title,
+    icon: this.getIcon()
+  }
+}
+
+BridgeElement.prototype.getIcon = function() {
+  const url = this.bridgeAttribute(`icon-url`)
+
+  if (url) {
+    return { url }
+  }
+
+  return null
+}
diff --git a/app/javascript/initializers/index.js b/app/javascript/initializers/index.js
index 10fb369755..90ef36a26a 100644
--- a/app/javascript/initializers/index.js
+++ b/app/javascript/initializers/index.js
@@ -1 +1,2 @@
 import "initializers/current"
+import "initializers/bridge/bridge_element"
diff --git a/app/views/account/settings/show.html.erb b/app/views/account/settings/show.html.erb
index 74e2744148..4385606357 100644
--- a/app/views/account/settings/show.html.erb
+++ b/app/views/account/settings/show.html.erb
@@ -1,7 +1,7 @@
 <% @page_title = "Account Settings" %>
 
 <% content_for :header do %>
-  <h1 class="header__title">
+  <h1 class="header__title" data-bridge--title-target="header">
     <%= @page_title %>
     <% unless Current.user.admin? %>
       <div class="txt-normal font-weight-normal">Only admins can change these settings</div>
diff --git a/app/views/boards/columns/closeds/show.html.erb b/app/views/boards/columns/closeds/show.html.erb
index 110db1c8ce..ca6c48e832 100644
--- a/app/views/boards/columns/closeds/show.html.erb
+++ b/app/views/boards/columns/closeds/show.html.erb
@@ -5,7 +5,7 @@
     <%= link_back_to_board(@board) %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>
diff --git a/app/views/boards/columns/not_nows/show.html.erb b/app/views/boards/columns/not_nows/show.html.erb
index f744635ae2..e7de8a5224 100644
--- a/app/views/boards/columns/not_nows/show.html.erb
+++ b/app/views/boards/columns/not_nows/show.html.erb
@@ -5,7 +5,7 @@
     <%= link_back_to_board(@board) %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>
diff --git a/app/views/boards/columns/show.html.erb b/app/views/boards/columns/show.html.erb
index cd6c396e75..e514b75aec 100644
--- a/app/views/boards/columns/show.html.erb
+++ b/app/views/boards/columns/show.html.erb
@@ -5,7 +5,7 @@
     <%= link_back_to_board(@column.board) %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>
diff --git a/app/views/boards/columns/streams/show.html.erb b/app/views/boards/columns/streams/show.html.erb
index 6ec6ac339d..26dce763d9 100644
--- a/app/views/boards/columns/streams/show.html.erb
+++ b/app/views/boards/columns/streams/show.html.erb
@@ -5,7 +5,7 @@
     <%= link_back_to_board(@board) %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>
diff --git a/app/views/boards/edit.html.erb b/app/views/boards/edit.html.erb
index 36beee3c86..978208e925 100644
--- a/app/views/boards/edit.html.erb
+++ b/app/views/boards/edit.html.erb
@@ -5,7 +5,7 @@
     <%= link_back_to_board(@board) %>
   </div>
 
-  <h1 class="header__title">
+  <h1 class="header__title" data-bridge--title-target="header">
     <div><%= @page_title %></div>
     <% unless Current.user.can_administer_board?(@board) %>
       <div class="txt-normal font-weight-normal">Only admins can change these settings</div>
diff --git a/app/views/boards/new.html.erb b/app/views/boards/new.html.erb
index 748028b8d3..928237a84c 100644
--- a/app/views/boards/new.html.erb
+++ b/app/views/boards/new.html.erb
@@ -1,11 +1,11 @@
 <% @page_title = "Create a new board" %>
 
 <div class="panel panel--centered">
-  <%= form_with model: @board, class: "flex flex-column gap", data: { controller: "form", action: "submit->form#preventEmptySubmit" } do |form| %>
+  <%= bridged_form_with model: @board, class: "flex flex-column gap", data: { controller: "form", action: "submit->form#preventEmptySubmit" } do |form| %>
     <h1 class="txt-x-large margin-none font-weight-black"><%= @page_title %></h1>
     <%= form.text_field :name, required: true, class: "input full-width", autofocus: true, autocomplete: "off", placeholder: "Name it…", data: { form_target: "input", action: "keydown.esc@document->form#cancel", validation_message: "Board names can‘t be blank" } %>
 
-    <button type="submit" class="btn btn--link center">
+    <button type="submit" class="btn btn--link center" data-bridge--form-target="submit">
       <span>Create board</span>
       <%= icon_tag "arrow-right" %>
     </button>
diff --git a/app/views/boards/show.html.erb b/app/views/boards/show.html.erb
index 36f3cd5525..bcccf4512e 100644
--- a/app/views/boards/show.html.erb
+++ b/app/views/boards/show.html.erb
@@ -5,15 +5,15 @@
 <%= turbo_stream_from @board %>
 
 <% content_for :header do %>
-  <div class="header__actions header__actions--start">
+  <div class="header__actions header__actions--start hide-on-native">
     <%= link_to_webhooks(@board) if Current.user.admin? %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @board.name %></span>
   </h1>
 
-  <div class="header__actions header__actions--end">
+  <div class="header__actions header__actions--end hide-on-native">
     <%= link_to_edit_board @board %>
   </div>
 <% end %>
diff --git a/app/views/boards/show/_stream.html.erb b/app/views/boards/show/_stream.html.erb
index 7773fb292a..b433091006 100644
--- a/app/views/boards/show/_stream.html.erb
+++ b/app/views/boards/show/_stream.html.erb
@@ -7,7 +7,9 @@
     <%= render "boards/show/expander", title: "Maybe?", count: board.cards.awaiting_triage.count, column_id: "maybe" %>
     <%= render "boards/show/menu/maximize", column_path: board_columns_stream_path(board) %>
   </header>
-  <%= render "columns/show/add_card_button", board: board %>
+  <div data-bridge-disabled="true">
+    <%= render "columns/show/add_card_button", board: board %>
+  </div>
   <div class="cards__list hide-scrollbar" data-drag-drop-item-container>
     <% if page.used? %>
       <%= with_automatic_pagination "maybe", @page do %>
diff --git a/app/views/cards/_container.html.erb b/app/views/cards/_container.html.erb
index 85e08bfd05..de3bc4b271 100644
--- a/app/views/cards/_container.html.erb
+++ b/app/views/cards/_container.html.erb
@@ -1,4 +1,4 @@
-<section id="<%= dom_id(card, :card_container) %>" class="card-perma" style="--card-color: <%= card.color %>;" data-controller="dialog-manager">
+<section id="<%= dom_id(card, :card_container) %>" class="card-perma" style="--card-color: <%= card.color %>;" data-controller="dialog-manager bridge--form">
   <% cache card do %>
     <div class="card-perma__actions card-perma__actions--left">
       <%= render "cards/container/gild", card: card if card.published? && !card.closed? %>
diff --git a/app/views/cards/boards/edit.html.erb b/app/views/cards/boards/edit.html.erb
index 265dc0a9eb..3dd6aeb31a 100644
--- a/app/views/cards/boards/edit.html.erb
+++ b/app/views/cards/boards/edit.html.erb
@@ -5,10 +5,10 @@
         dialog_target: "dialog",
         navigable_list_focus_on_selection_value: false,
         navigable_list_actionable_items_value: true } do %>
-    <strong class="popup__title pad-inline-half">Move this card to…</strong>
+    <%= filter_title "Move this card to…" %>
 
     <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half font-weight-normal", autofocus: true,
-          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>
 
     <ul class="popup__list margin-block-start-half margin-none-block-end" data-filter-target="list">
       <% @boards.each do |board| %>
diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb
index 8aa190c785..1afbaaaacf 100644
--- a/app/views/cards/container/_closure.html.erb
+++ b/app/views/cards/container/_closure.html.erb
@@ -1,17 +1,13 @@
 <div class="display-contents" id="<%= dom_id(card, :card_closure_toggle) %>">
   <% if card.closed? %>
-    <div class="card-perma__notch card-perma__notch--bottom flex-column">
-      <div class="flex gap-half margin-block-start-double margin-block-end">
-        <span class="card-perma__closure-message">
-          Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.
-          <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %>
-            <span class="pad-inline-end">Undo</span>
-          <% end %>
-        </span>
-      </div>
+    <div class="card-perma__closure-message flex gap-half justify-center">
+      <span>Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.</span>
+      <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %>
+        <span class="pad-inline-end">Undo</span>
+      <% end %>
     </div>
   <% else %>
-    <div class="card-perma__notch card-perma__notch--bottom flex-column">
+    <div class="card-perma__notch card-perma__notch--bottom">
       <%= render "cards/container/closure_buttons", card: card %>
     </div>
     <% if card.entropic? && card.open? && !card.postponed? %>
diff --git a/app/views/cards/container/_closure_buttons.html.erb b/app/views/cards/container/_closure_buttons.html.erb
index 3a82ace0ae..05e2923157 100644
--- a/app/views/cards/container/_closure_buttons.html.erb
+++ b/app/views/cards/container/_closure_buttons.html.erb
@@ -1,12 +1,13 @@
 <div class="flex gap-half">
-  <%= link_to edit_card_path(card), class: "btn btn--circle-mobile borderless", data: { controller: "hotkey", action: "keydown.e@document->hotkey#click", turbo_frame: dom_id(card, :edit) } do %>
+  <%= link_to edit_card_path(card), class: "btn btn--circle-mobile borderless",
+        data: { controller: "hotkey", action: "keydown.e@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Edit", bridge_icon_url: bridge_icon("pencil"), turbo_frame: dom_id(card, :edit) } do %>
     <%= icon_tag "pencil", class: "icon--mobile-only" %>
     <span>Edit</span>
     <kbd class="txt-x-small hide-on-touch">e</kbd>
   <% end %>
 
   <%= button_to card_closure_path(card), class: "btn btn--circle-mobile borderless",
-        data: { controller: "hotkey", form_target: "submit", action: "keydown.d@document->hotkey#click" },
+        data: { controller: "hotkey", form_target: "submit", bridge__buttons_target: "button", bridge_title: "Mark as Done", bridge_icon_url: bridge_icon("check"), action: "keydown.d@document->hotkey#click" },
         form: { data: { controller: "form" } } do %>
     <%= icon_tag "check", class: "icon--mobile-only" %>
     <span class="overflow-ellipsis">Mark as Done</span>
diff --git a/app/views/cards/container/_gild.html.erb b/app/views/cards/container/_gild.html.erb
index 7647a3b4ff..a40f0c0c2a 100644
--- a/app/views/cards/container/_gild.html.erb
+++ b/app/views/cards/container/_gild.html.erb
@@ -1,10 +1,12 @@
 <% 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",
+        data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click", bridge__overflow_menu_target: "item", bridge_title: "Demote to normal" } 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",
+        data: { controller: "tooltip hotkey", action: "keydown.shift+g@document->hotkey#click", bridge__overflow_menu_target: "item", bridge_title: "Promote to Golden Ticket" } 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..9edda22496 100644
--- a/app/views/cards/container/_image.html.erb
+++ b/app/views/cards/container/_image.html.erb
@@ -1,11 +1,12 @@
 <% if card.image.attached? %>
-  <%= button_to card_image_path(card), method: :delete, class: "btn", data: { controller: "tooltip" } do %>
+  <%= button_to card_image_path(card), method: :delete, class: "btn",
+        data: { controller: "tooltip", bridge__overflow_menu_target: "item", bridge_title: "Remove background image" } do %>
     <%= icon_tag "picture-remove" %>
     <span class="for-screen-reader">Remove background image</span>
   <% 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" data-controller="tooltip" data-bridge--overflow-menu-target="item" data-bridge-title="Add background image">
       <%= icon_tag "picture-add" %>
       <span class="for-screen-reader">Add background image</span>
 
diff --git a/app/views/cards/container/_save_button.html.erb b/app/views/cards/container/_save_button.html.erb
index 45d836293e..6ac416aa3d 100644
--- a/app/views/cards/container/_save_button.html.erb
+++ b/app/views/cards/container/_save_button.html.erb
@@ -1,7 +1,7 @@
 <div class="card-perma__notch card-perma__notch--bottom flex-column">
   <%= button_tag type: :submit, form: dom_id(card, :edit_form), class: "btn borderless",
         title: "Save changes (#{ hotkey_label(["ctrl", "enter"]) })",
-        data: { controller: "hotkey", action: "keydown.ctrl+enter@document->hotkey#click keydown.meta+enter@document->hotkey#click" } do %>
+        data: { controller: "hotkey", bridge__form_target: "submit", action: "keydown.ctrl+enter@document->hotkey#click keydown.meta+enter@document->hotkey#click" } do %>
     <span>Save changes</span>
   <% end %>
 </div>
diff --git a/app/views/cards/container/footer/_create.html.erb b/app/views/cards/container/footer/_create.html.erb
index 8b5062fdd6..b55cae3447 100644
--- a/app/views/cards/container/footer/_create.html.erb
+++ b/app/views/cards/container/footer/_create.html.erb
@@ -2,8 +2,8 @@
   <div class="card-perma__notch-new-card-buttons">
     <%= button_to card_publish_path(card), name: "creation_type", value: "add", class: "btn",
           title: "Create card (#{ hotkey_label(["ctrl", "enter"]) })",
-          form: { data: { controller: "form" } },
-          data: { form_target: "submit", controller: "clicker", action: "keydown.ctrl+enter@document->clicker#click keydown.meta+enter@document->clicker#click" } do %>
+          form: { data: { controller: "form bridge--form" } },
+          data: { form_target: "submit", bridge__form_target: "submit", controller: "clicker", action: "keydown.ctrl+enter@document->clicker#click keydown.meta+enter@document->clicker#click" } do %>
       <span>Create card</span>
     <% end %>
 
diff --git a/app/views/cards/edit.html.erb b/app/views/cards/edit.html.erb
index 21a35d09fd..a7efd21fe0 100644
--- a/app/views/cards/edit.html.erb
+++ b/app/views/cards/edit.html.erb
@@ -22,6 +22,7 @@
       <%= general_prompts(@card.board) %>
     <% end %>
 
-    <%= link_to "Close editor and discard changes", @card, data: { form_target: "cancel" }, hidden: true %>
+    <%= link_to "Close editor and discard changes", @card,
+          data: { form_target: "cancel", bridge__form_target: "cancel", bridge_title: "Cancel" }, hidden: true %>
   <% end %>
 <% end %>
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb
index 20bbfac98c..6fad43b55a 100644
--- a/app/views/cards/index.html.erb
+++ b/app/views/cards/index.html.erb
@@ -4,7 +4,7 @@
 <%= render "cards/broadcasts", filter: @filter %>
 
 <% content_for :header do %>
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis txt-capitalize-first-letter"><%= @user_filtering.selected_boards_label %></span>
   </h1>
 
diff --git a/app/views/cards/pins/_pin_button.html.erb b/app/views/cards/pins/_pin_button.html.erb
index 9e26872a4e..d52f8f1c43 100644
--- a/app/views/cards/pins/_pin_button.html.erb
+++ b/app/views/cards/pins/_pin_button.html.erb
@@ -1,10 +1,12 @@
 <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",
+          data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click", bridge__overflow_menu_target: "item", bridge_title: "Un-pin this card" } 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",
+          data: { controller: "tooltip hotkey", action: "keydown.shift+p@document->hotkey#click", bridge__overflow_menu_target: "item", bridge_title: "Pin this card" } 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..a02d0b1969 100644
--- a/app/views/cards/watches/_watch_button.html.erb
+++ b/app/views/cards/watches/_watch_button.html.erb
@@ -1,11 +1,13 @@
 <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",
+          data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click", bridge__overflow_menu_target: "item", bridge_title: "Stop watching" } 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",
+          data: { controller: "tooltip hotkey", action: "keydown.shift+n@document->hotkey#click", bridge__overflow_menu_target: "item", bridge_title: "Watch this" } do %>
       <%= icon_tag "bell-off" %>
       <span class="for-screen-reader">Watch this (shift+n)</span>
     <% end %>
diff --git a/app/views/columns/show/_add_card_button.html.erb b/app/views/columns/show/_add_card_button.html.erb
index 974a885283..040fd55d3f 100644
--- a/app/views/columns/show/_add_card_button.html.erb
+++ b/app/views/columns/show/_add_card_button.html.erb
@@ -1,5 +1,7 @@
 <div class="board-tools card">
-  <%= button_to board_cards_path(board), method: :post, class: "btn btn--link", form: { data: { turbo_frame: "_top" } }, data: { controller: "hotkey", action: "keydown.c@document->hotkey#click" } do %>
+  <%= button_to board_cards_path(board), method: :post, class: "btn btn--link",
+        form: { data: { turbo_frame: "_top" } },
+        data: { controller: "hotkey", action: "keydown.c@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add card", bridge_icon_url: bridge_icon("add") } do %>
     <%= icon_tag "add", class: "show-on-touch" %>
     <span>Add a card</span>
     <kbd class="hide-on-touch">C</kbd>
diff --git a/app/views/events/day_timeline/columns/show.html.erb b/app/views/events/day_timeline/columns/show.html.erb
index dada2ebc4f..f939e516f7 100644
--- a/app/views/events/day_timeline/columns/show.html.erb
+++ b/app/views/events/day_timeline/columns/show.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to "Activity", root_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title">
+  <h1 class="header__title" data-bridge--title-target="header">
     <%= @column.title %>
   </h1>
 <% end %>
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 5e0744d262..f567f6d91c 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -6,7 +6,7 @@
 <% content_for :header do %>
   <%= render "events/index/add_card_button", user_filtering: @user_filtering %>
 
-  <h1 class="header__title" data-controller="dialog-manager">
+  <h1 class="header__title" data-controller="dialog-manager" data-bridge--title-target="header">
     <% if @user_filtering.boards.many? %>
       <span>Activity <%= @user_filtering.filter.boards.any? ? "in" : "across" %></span>
     <% else %>
diff --git a/app/views/events/index/_add_board_button.html.erb b/app/views/events/index/_add_board_button.html.erb
index 613252ff33..a534626d4e 100644
--- a/app/views/events/index/_add_board_button.html.erb
+++ b/app/views/events/index/_add_board_button.html.erb
@@ -1,6 +1,7 @@
 <div class="header__actions header__actions--end">
   <div>
-    <%= link_to new_board_path, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.b@document->hotkey#click" } do %>
+    <%= link_to new_board_path, class: "btn btn--link btn--circle-mobile",
+          data: { controller: "hotkey", action: "keydown.b@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add a board", bridge_icon_url: bridge_icon("board") } do %>
       <%= icon_tag "board" %>
       <span class="overflow-ellipsis">Add a board</span>
       <kbd class="hide-on-touch">B</kbd>
diff --git a/app/views/events/index/_add_card_button.html.erb b/app/views/events/index/_add_card_button.html.erb
index b653e89b53..f865e54031 100644
--- a/app/views/events/index/_add_card_button.html.erb
+++ b/app/views/events/index/_add_card_button.html.erb
@@ -1,6 +1,7 @@
 <div class="header__actions header__actions--start">
   <% if board = user_filtering.single_board_or_first %>
-    <%= button_to board_cards_path(board), method: :post, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.c@document->hotkey#click" } do %>
+    <%= button_to board_cards_path(board), method: :post, class: "btn btn--link btn--circle-mobile",
+          data: { controller: "hotkey", action: "keydown.c@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add a card", bridge_icon_url: bridge_icon("add") } do %>
       <%= icon_tag "add" %>
       <span class="overflow-ellipsis">Add a card</span>
       <kbd class="hide-on-touch">C</kbd>
diff --git a/app/views/events/index/filter/_board.html.erb b/app/views/events/index/filter/_board.html.erb
index 326ce77f9e..7bf50062c5 100644
--- a/app/views/events/index/filter/_board.html.erb
+++ b/app/views/events/index/filter/_board.html.erb
@@ -16,9 +16,9 @@
   </template>
 
   <%= filter_dialog "Board…" do %>
-    <strong class="popup__title">Board…</strong>
+    <%= filter_title "Board…" %>
     <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true,
-          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>
 
     <ul class="popup__list" data-filter-target="list" role="listbox">
       <% user_filtering.boards.each do |board| %>
diff --git a/app/views/events/index/filter/_user.html.erb b/app/views/events/index/filter/_user.html.erb
index e5b37a8a25..68abdfe4c3 100644
--- a/app/views/events/index/filter/_user.html.erb
+++ b/app/views/events/index/filter/_user.html.erb
@@ -16,9 +16,9 @@
   </template>
 
   <%= filter_dialog "Person…" do %>
-    <strong class="popup__title">Person…</strong>
+    <%= filter_title "Person…" %>
     <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true,
-          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>
 
     <ul class="popup__list" data-filter-target="list" role="listbox">
       <% user_filtering.users.each do |user| %>
diff --git a/app/views/filters/settings/_assignees.html.erb b/app/views/filters/settings/_assignees.html.erb
index 9a2fdd8946..ddff3f4fa8 100644
--- a/app/views/filters/settings/_assignees.html.erb
+++ b/app/views/filters/settings/_assignees.html.erb
@@ -16,11 +16,10 @@
     </template>
 
     <%= filter_dialog "Assigned to…" do %>
-      <strong class="popup__title">Assigned to…</strong>
-
+      <%= filter_title "Assigned to…" %>
       <% if Current.account.users.active.many? %>
         <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>
       <% end %>
 
       <ul class="popup__list" data-filter-target="list" role="listbox">
diff --git a/app/views/filters/settings/_boards.html.erb b/app/views/filters/settings/_boards.html.erb
index 56abeeb8ce..c3b9bc9562 100644
--- a/app/views/filters/settings/_boards.html.erb
+++ b/app/views/filters/settings/_boards.html.erb
@@ -17,11 +17,10 @@
     </template>
 
     <%= filter_dialog "Board…" do %>
-      <strong class="popup__title">Board…</strong>
-
+      <%= filter_title "Board…" %>
       <% if user_filtering.boards.many? %>
         <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>
       <% end %>
 
       <ul class="popup__list" data-filter-target="list" role="listbox">
diff --git a/app/views/filters/settings/_closers.html.erb b/app/views/filters/settings/_closers.html.erb
index a4ca4eb768..057c99d405 100644
--- a/app/views/filters/settings/_closers.html.erb
+++ b/app/views/filters/settings/_closers.html.erb
@@ -17,11 +17,10 @@
     </template>
 
     <%= filter_dialog "Closed by…" do %>
-      <strong class="popup__title">Closed by…</strong>
-
+      <%= filter_title "Closed by…" %>
       <% if user_filtering.users.many? %>
         <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>
       <% end %>
 
       <ul class="popup__list" data-filter-target="list" role="listbox">
diff --git a/app/views/filters/settings/_creators.html.erb b/app/views/filters/settings/_creators.html.erb
index 4956c5f925..92831226a0 100644
--- a/app/views/filters/settings/_creators.html.erb
+++ b/app/views/filters/settings/_creators.html.erb
@@ -17,11 +17,10 @@
     </template>
 
     <%= filter_dialog "Added by…" do %>
-      <strong class="popup__title">Added by…</strong>
-
+      <%= filter_title "Added by…" %>
       <% if user_filtering.users.many? %>
         <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>
       <% end %>
 
       <ul class="popup__list" data-filter-target="list" role="listbox">
diff --git a/app/views/filters/settings/_tags.html.erb b/app/views/filters/settings/_tags.html.erb
index beb86b49e8..faf8d11090 100644
--- a/app/views/filters/settings/_tags.html.erb
+++ b/app/views/filters/settings/_tags.html.erb
@@ -15,11 +15,10 @@
   </template>
 
   <%= filter_dialog "Tagged…" do %>
-    <strong class="popup__title">Tagged…</strong>
-
+    <%= filter_title "Tagged…" %>
     <% if user_filtering.tags.many? %>
       <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
-            type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+            type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>
     <% end %>
 
     <ul class="popup__list" data-filter-target="list" role="listbox">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8790729f6d..475a7a79ef 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -2,8 +2,11 @@
 <html lang="en">
   <%= render "layouts/shared/head" %>
 
-  <body class="<%= @body_class %>" data-controller="local-time timezone-cookie turbo-navigation theme" data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation" data-platform="<%= platform.type %>">
-    <div id="global-container">
+  <body class="<%= @body_class %>"
+    data-controller="local-time timezone-cookie turbo-navigation theme bridge--title bridge--text-size bridge--insets"
+    data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation"
+    data-platform="<%= platform.type %>" data-bridge--title-title-value="<%= @page_title %>">
+    <div id="global-container" data-controller="bridge--buttons bridge--overflow-menu">
       <header class="header header--mobile-actions-stack <%= @header_class %>" id="header">
         <a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
         <%= render "my/menu" if Current.user %>
diff --git a/app/views/my/access_tokens/index.html.erb b/app/views/my/access_tokens/index.html.erb
index cc9b83ede5..6cfd1abd82 100644
--- a/app/views/my/access_tokens/index.html.erb
+++ b/app/views/my/access_tokens/index.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to "My profile", user_path(Current.user), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
 <section class="panel panel--wide shadow center webhooks">
diff --git a/app/views/my/access_tokens/new.html.erb b/app/views/my/access_tokens/new.html.erb
index be08e5031a..27e7fbffc7 100644
--- a/app/views/my/access_tokens/new.html.erb
+++ b/app/views/my/access_tokens/new.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to "tokens", my_access_tokens_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
 <article class="panel panel--wide shadow center txt-align-start" style="view-transition-name: <%= dom_id(@access_token) %>">
diff --git a/app/views/my/access_tokens/show.html.erb b/app/views/my/access_tokens/show.html.erb
index 16becf7c21..7611377107 100644
--- a/app/views/my/access_tokens/show.html.erb
+++ b/app/views/my/access_tokens/show.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to "Tokens", my_access_tokens_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
 <article class="panel panel--wide shadow center txt-align-start" style="view-transition-name: <%= dom_id(@access_token) %>">
diff --git a/app/views/my/pins/index.html.erb b/app/views/my/pins/index.html.erb
index e98c418dee..eabe156f95 100644
--- a/app/views/my/pins/index.html.erb
+++ b/app/views/my/pins/index.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to "Home", root_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
 <div class="pins-list panel panel--wide flex center borderless unpad flex-column gap-half margin-block-start">
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 7115367236..add5e69d78 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -6,10 +6,10 @@
     <%= back_link_to "Home", root_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--title-target="header"><%= @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", data: { bridge__overflow_menu_target: "item", bridge_title: "Notification settings" } do %>
       <%= icon_tag "settings" %> <span class="for-screen-reader">Notification settings</span>
     <% end %>
   </div>
diff --git a/app/views/notifications/settings/show.html.erb b/app/views/notifications/settings/show.html.erb
index 5972e7fdad..2a37b3092d 100644
--- a/app/views/notifications/settings/show.html.erb
+++ b/app/views/notifications/settings/show.html.erb
@@ -1,7 +1,7 @@
 <% @page_title = "Notification Settings" %>
 
 <% content_for :header do %>
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
 <section class="settings margin-block-start-half">
diff --git a/app/views/public/boards/columns/closeds/show.html.erb b/app/views/public/boards/columns/closeds/show.html.erb
index 61ce3887da..91a36b1e5f 100644
--- a/app/views/public/boards/columns/closeds/show.html.erb
+++ b/app/views/public/boards/columns/closeds/show.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>
diff --git a/app/views/public/boards/columns/not_nows/show.html.erb b/app/views/public/boards/columns/not_nows/show.html.erb
index 3dad8bcfeb..363c601df0 100644
--- a/app/views/public/boards/columns/not_nows/show.html.erb
+++ b/app/views/public/boards/columns/not_nows/show.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>
diff --git a/app/views/public/boards/columns/show.html.erb b/app/views/public/boards/columns/show.html.erb
index a8a86451be..54fcb18cc2 100644
--- a/app/views/public/boards/columns/show.html.erb
+++ b/app/views/public/boards/columns/show.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to @column.board.name, published_board_url(@column.board), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>
diff --git a/app/views/public/boards/columns/streams/show.html.erb b/app/views/public/boards/columns/streams/show.html.erb
index 5566a7955e..ae145725c5 100644
--- a/app/views/public/boards/columns/streams/show.html.erb
+++ b/app/views/public/boards/columns/streams/show.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>
diff --git a/app/views/public/boards/show.html.erb b/app/views/public/boards/show.html.erb
index d3562c59c8..b73a17050a 100644
--- a/app/views/public/boards/show.html.erb
+++ b/app/views/public/boards/show.html.erb
@@ -14,7 +14,7 @@
 <% end %>
 
 <% content_for :header do %>
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--title-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>
diff --git a/app/views/searches/show.html.erb b/app/views/searches/show.html.erb
index 6ffc0facc6..776ab9d382 100644
--- a/app/views/searches/show.html.erb
+++ b/app/views/searches/show.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to "Home", root_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
 <div class="search-perma margin-block-start">
diff --git a/app/views/webhooks/index.html.erb b/app/views/webhooks/index.html.erb
index e8f72c0a40..987ae0094d 100644
--- a/app/views/webhooks/index.html.erb
+++ b/app/views/webhooks/index.html.erb
@@ -5,7 +5,7 @@
     <%= link_back_to_board(@board) %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
 <%= tag.section class: "panel panel--wide shadow center webhooks" do %>
diff --git a/app/views/webhooks/new.html.erb b/app/views/webhooks/new.html.erb
index e1a6af5138..9d2873ecee 100644
--- a/app/views/webhooks/new.html.erb
+++ b/app/views/webhooks/new.html.erb
@@ -5,7 +5,7 @@
     <%= back_link_to "Webhooks", board_webhooks_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
 <article class="panel panel--wide center txt-align-start" style="view-transition-name: <%= dom_id(@webhook) %>">
diff --git a/config/importmap.rb b/config/importmap.rb
index 3431633f98..27dbd7015d 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -4,11 +4,15 @@
 pin "@hotwired/turbo-rails", to: "turbo.min.js"
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+pin "@hotwired/hotwire-native-bridge", to: "@hotwired--hotwire-native-bridge.js"
 pin "@rails/request.js", to: "@rails--request.js" # @0.0.13
 
 pin_all_from "app/javascript/controllers", under: "controllers"
 pin_all_from "app/javascript/helpers", under: "helpers"
 pin_all_from "app/javascript/initializers", under: "initializers"
+pin_all_from "app/javascript/bridge/initializers", under: "bridge/initializers"
+pin_all_from "app/javascript/bridge/helpers", under: "bridge/helpers"
+pin_all_from "app/javascript/bridge/controllers/bridge", under: "controllers/bridge", to: "bridge/controllers/bridge"
 pin "marked" # @15.0.11
 pin "lexxy"
 pin "@rails/activestorage", to: "activestorage.esm.js"
diff --git a/vendor/javascript/@hotwired--hotwire-native-bridge.js b/vendor/javascript/@hotwired--hotwire-native-bridge.js
new file mode 100644
index 0000000000..c7e9927a7d
--- /dev/null
+++ b/vendor/javascript/@hotwired--hotwire-native-bridge.js
@@ -0,0 +1,4 @@
+// @hotwired/hotwire-native-bridge@1.2.2 downloaded from https://ga.jspm.io/npm:@hotwired/hotwire-native-bridge@1.2.2/dist/hotwire-native-bridge.js
+
+import{Controller as e}from"@hotwired/stimulus";var t=class{#e;#t;#s;#n;constructor(){this.#e=null;this.#t=0;this.#s=[];this.#n=new Map}start(){this.notifyApplicationAfterStart()}notifyApplicationAfterStart(){document.dispatchEvent(new Event("web-bridge:ready"))}supportsComponent(e){return!!this.#e&&this.#e.supportsComponent(e)}send({component:e,event:t,data:s,callback:n}){if(!this.#e){this.#i({component:e,event:t,data:s,callback:n});return null}if(!this.supportsComponent(e))return null;const i=this.generateMessageId();const r={id:i,component:e,event:t,data:s||{}};this.#e.receive(r);n&&this.#n.set(i,n);return i}receive(e){this.executeCallbackFor(e)}executeCallbackFor(e){const t=this.#n.get(e.id);t&&t(e)}removeCallbackFor(e){this.#n.has(e)&&this.#n.delete(e)}removePendingMessagesFor(e){this.#s=this.#s.filter((t=>t.component!=e))}generateMessageId(){const e=++this.#t;return e.toString()}setAdapter(e){this.#e=e;document.documentElement.dataset.bridgePlatform=this.#e.platform;this.adapterDidUpdateSupportedComponents();this.#r()}adapterDidUpdateSupportedComponents(){this.#e&&(document.documentElement.dataset.bridgeComponents=this.#e.supportedComponents.join(" "))}#i(e){this.#s.push(e)}#r(){this.#s.forEach((e=>this.send(e)));this.#s=[]}};var s=class{constructor(e){this.element=e}get title(){return(this.bridgeAttribute("title")||this.attribute("aria-label")||this.element.textContent||this.element.value).trim()}get enabled(){return!this.disabled}get disabled(){const e=this.bridgeAttribute("disabled");return e==="true"||e===this.platform}enableForComponent(e){e.enabled&&this.removeBridgeAttribute("disabled")}hasClass(e){return this.element.classList.contains(e)}attribute(e){return this.element.getAttribute(e)}bridgeAttribute(e){return this.attribute(`data-bridge-${e}`)}setBridgeAttribute(e,t){this.element.setAttribute(`data-bridge-${e}`,t)}removeBridgeAttribute(e){this.element.removeAttribute(`data-bridge-${e}`)}click(){this.platform=="android"&&this.element.removeAttribute("target");this.element.click()}get platform(){return document.documentElement.dataset.bridgePlatform}};var{userAgent:n}=window.navigator;function i(e){const t=n.match(/bridge-components: \[(.*?)\]/);return!!t&&t[1].split(" ").includes(e)}var r=class extends e{static component="";static get shouldLoad(){return i(this.component)}pendingMessageCallbacks=[];initialize(){this.pendingMessageCallbacks=[]}connect(){this.removeRestoreEventListener();this.addRestoreEventListener()}disconnect(){this.removePendingCallbacks();this.removePendingMessages();this.removeRestoreEventListener()}addRestoreEventListener(){this.restore=this.restore.bind(this);document.addEventListener("native:restore",this.restore)}removeRestoreEventListener(){document.removeEventListener("native:restore",this.restore)}restore(){this.connect()}get component(){return this.constructor.component}get platformOptingOut(){const{bridgePlatform:e}=document.documentElement.dataset;return this.identifier==this.element.getAttribute(`data-controller-optout-${e}`)}get enabled(){return!this.platformOptingOut&&this.bridge.supportsComponent(this.component)}send(e,t={},s){t.metadata={url:window.location.href};const n={component:this.component,event:e,data:t,callback:s};const i=this.bridge.send(n);s&&this.pendingMessageCallbacks.push(i)}removePendingCallbacks(){this.pendingMessageCallbacks.forEach((e=>this.bridge.removeCallbackFor(e)))}removePendingMessages(){this.bridge.removePendingMessagesFor(this.component)}get bridgeElement(){return new s(this.element)}get bridge(){return window.HotwireNative.web}};if(!window.HotwireNative){const e=new t;window.HotwireNative={web:e};a(e);e.start()}function a(e){window.Strada||(window.Strada={web:e});window.webBridge||(window.webBridge=e)}export{r as BridgeComponent,s as BridgeElement};
+