Fix header and bottom navbar positioning

app/assets/stylesheets/application.tailwind.css

@@ -18,6 +18,20 @@
   }
 }
 
+/* Adjustments for iOS PWA support */
+html {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-top);
+}
+
+.pt-header-safe-area {
+  padding-top: max(env(safe-area-inset-top), 24px);
+}
+
+.pb-navbar-safe-area {
+  padding-bottom: max(env(safe-area-inset-bottom), 4px);
+}
+
 /* Form errors */
 div.field_with_errors > label {
   @apply mb-2 italic font-bold text-red;

app/views/layouts/_bottom_navbar.html.erb

@@ -1,76 +1,74 @@
-<div class="pb-14">
-  <div class="fixed bottom-0 left-0 right-0 z-30 flex flex-row items-center justify-center pt-2 pb-1 bg-white border-t border-b h-14 border-grey-200">
-    <div class="flex flex-row items-center justify-around w-full max-w-screen-sm text-[11px]">
-      <%= link_to(
-        sessions_path(
-          starts_at: current_starts_at_filter,
-          anchor: session_anchor(current_agenda_session)
-        ),
-        class: [
-          nav_text_class_for([sessions_path, root_path, "/speakers"]),
-          "flex flex-col items-center justify-center"
-        ]
-      ) do %>
-        <%= inline_svg_tag "icons/calendar.svg", class: nav_icon_class_for([sessions_path, root_path, "/speakers"]) %>
-        Agenda
-      <% end %>
+<div class="fixed bottom-0 z-40 flex flex-row items-center justify-center w-full pt-2 bg-white border-t border-b pb-navbar-safe-area border-grey-200">
+  <div class="flex flex-row items-center justify-around w-full max-w-screen-sm text-[11px]">
+    <%= link_to(
+      sessions_path(
+        starts_at: current_starts_at_filter,
+        anchor: session_anchor(current_agenda_session)
+      ),
+      class: [
+        nav_text_class_for([sessions_path, root_path, "/speakers"]),
+        "flex flex-col items-center justify-center"
+      ]
+    ) do %>
+      <%= inline_svg_tag "icons/calendar.svg", class: nav_icon_class_for([sessions_path, root_path, "/speakers"]) %>
+      Agenda
+    <% end %>
 
-      <%= link_to(
-        schedule_path(
-          starts_at: current_starts_at_filter,
-          anchor: session_anchor(current_user.sessions.live_or_upcoming_today.first)
-        ),
-        class: [
-          nav_text_class_for([schedule_path]),
-          "flex flex-col items-center justify-center"
-        ]
-      ) do %>
-        <%= inline_svg_tag "icons/clock.svg", class: nav_icon_class_for([schedule_path]) %>
-        My Schedule
-      <% end %>
+    <%= link_to(
+      schedule_path(
+        starts_at: current_starts_at_filter,
+        anchor: session_anchor(current_user.sessions.live_or_upcoming_today.first)
+      ),
+      class: [
+        nav_text_class_for([schedule_path]),
+        "flex flex-col items-center justify-center"
+      ]
+    ) do %>
+      <%= inline_svg_tag "icons/clock.svg", class: nav_icon_class_for([schedule_path]) %>
+      My Schedule
+    <% end %>
 
-      <%= link_to(
-        profile_path(current_profile&.uuid),
-        class: [
-          nav_text_class_for(["/profiles"]),
-          "flex flex-col items-center justify-center"
-        ]
-      ) do %>
-        <%= inline_svg_tag(
-          "icons/avatar_no_fill.svg",
-          class: nav_icon_class_for(["/profiles"])
-        ) %>
-        Profile
-      <% end %>
+    <%= link_to(
+      profile_path(current_profile&.uuid),
+      class: [
+        nav_text_class_for(["/profiles"]),
+        "flex flex-col items-center justify-center"
+      ]
+    ) do %>
+      <%= inline_svg_tag(
+        "icons/avatar_no_fill.svg",
+        class: nav_icon_class_for(["/profiles"])
+      ) %>
+      Profile
+    <% end %>
 
-      <%= link_to(
-        notifications_path,
-        class: [
-          nav_text_class_for([notifications_path, notification_settings_path]),
-          "relative flex flex-col items-center justify-center"
-        ]
-      ) do %>
-        <%= inline_svg_tag "icons/bell.svg", class: nav_icon_class_for([notifications_path, notification_settings_path]) %>
-        <% if unread_notifications.present? %>
-          <div class="absolute -top-0.5 right-0 w-[18px] h-[18px] rounded-full bg-red flex justify-center items-center">
-            <span class="text-[11px] text-white font-bold px-1">
-              <%= unread_notifications.count < 10 ? unread_notifications.count : "+9" %>
-            </span>
-          </div>
-        <% end %>
-        Notifications
+    <%= link_to(
+      notifications_path,
+      class: [
+        nav_text_class_for([notifications_path, notification_settings_path]),
+        "relative flex flex-col items-center justify-center"
+      ]
+    ) do %>
+      <%= inline_svg_tag "icons/bell.svg", class: nav_icon_class_for([notifications_path, notification_settings_path]) %>
+      <% if unread_notifications.present? %>
+        <div class="absolute -top-0.5 right-0 w-[18px] h-[18px] rounded-full bg-red flex justify-center items-center">
+          <span class="text-[11px] text-white font-bold px-1">
+            <%= unread_notifications.count < 10 ? unread_notifications.count : "+9" %>
+          </span>
+        </div>
       <% end %>
+      Notifications
+    <% end %>
 
-      <%= link_to(
-        about_path,
-        class: [
-          nav_text_class_for([about_path]),
-          "flex flex-col items-center justify-center"
-        ]
-      ) do %>
-        <%= inline_svg_tag "icons/info_circle.svg", class: nav_icon_class_for([about_path]) %>
-        About
-      <% end %>
-    </div>
+    <%= link_to(
+      about_path,
+      class: [
+        nav_text_class_for([about_path]),
+        "flex flex-col items-center justify-center"
+      ]
+    ) do %>
+      <%= inline_svg_tag "icons/info_circle.svg", class: nav_icon_class_for([about_path]) %>
+      About
+    <% end %>
   </div>
 </div>

app/views/layouts/_header.html.erb

@@ -1,4 +1,4 @@
-<div class="sticky top-0 z-30 flex justify-center w-full py-6 mx-auto border-b border-b-white bg-purple-dark">
+<header class="fixed top-0 z-40 flex justify-center w-full pb-6 mx-auto border-b pt-header-safe-area border-b-white bg-purple-dark">
   <div class="flex max-w-screen-sm px-5">
     <%= link_to root_path(
                   starts_at: current_starts_at_filter,
@@ -7,4 +7,4 @@
       <%= inline_svg_tag("main_logo.svg", class: "w-full") %>
     <% end %>
   </div>
-</div>
+</header>

app/views/layouts/application.html.erb

@@ -3,7 +3,7 @@
   <head>
     <title><%= content_for(:title).presence || "Rails World 2024" %></title>
 
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">
     <meta name="turbo-refresh-scroll" content="preserve">
     <meta name="turbo-refresh-method" content="morph">
     <meta name="view-transition" content="same-origin">
@@ -34,22 +34,22 @@
     data-web-push-notifications-vapid-key-value=#{vapid_public_key}
     data-web-push-notifications-notifications-enabled-value=#{current_profile.web_push_notifications}" : '' %>>
 
-    <main class="flex flex-col flex-1 w-full mx-auto">
-      <% if show_header? %>
-        <%= render partial: "layouts/header" %>
-      <% end %>
+    <% if show_header? %>
+      <%= render partial: "layouts/header" %>
+    <% end %>
 
+    <main class="flex flex-col flex-1 w-full mx-auto">
       <% flash.each do |type, message| %>
         <% if message.present? && message.is_a?(String) %>
           <%= render partial: "layouts/flash_message", locals: { message: message } %>
         <% end %>
       <% end %>
 
       <%= yield %>
-
-      <% if show_bottom_navbar? %>
-        <%= render partial: "layouts/bottom_navbar", locals: { unread_notifications: current_user.notifications.unread } %>
-      <% end %>
     </main>
+
+    <% if show_bottom_navbar? %>
+      <%= render partial: "layouts/bottom_navbar", locals: { unread_notifications: current_user.notifications.unread } %>
+    <% end %>
   </body>
 </html>