Mobile/prepare webviews 2

app/assets/stylesheets/_global.css

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

app/assets/stylesheets/buttons.css

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

app/assets/stylesheets/events.css

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

app/assets/stylesheets/header.css

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

app/assets/stylesheets/ios.css

@@ -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;
+    }
   }
 }

app/assets/stylesheets/layout.css

@@ -23,8 +23,8 @@
     margin-inline: auto;
     max-inline-size: 100dvw;
     padding-inline:
-      calc(var(--main-padding) + env(safe-area-inset-left))
-      calc(var(--main-padding) + env(safe-area-inset-right));
+      calc(var(--main-padding) + var(--custom-safe-inset-left))
+      calc(var(--main-padding) + var(--custom-safe-inset-right));
     text-align: center;
   }
 

app/assets/stylesheets/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 {
@@ -19,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 {
@@ -35,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
     /* ------------------------------------------------------------------------ */
 

app/assets/stylesheets/settings.css

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

app/helpers/application_helper.rb

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

app/helpers/boards_helper.rb

@@ -4,7 +4,7 @@ def link_back_to_board(board)
   end
 
   def link_to_edit_board(board)
-    link_to edit_board_path(board), class: "btn", 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

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

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>

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 %>

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>
 

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 %>

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 %>

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>