diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index e2df294c3e6..ee54d6cb2d0 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -38,6 +38,11 @@
   }
 }
 
+.profiler-button {
+  position: fixed;
+  top: env(safe-area-inset-top, 0);
+}
+
 .combobox {
   .hw-combobox__main__wrapper,
   .hw-combobox__input {
diff --git a/app/assets/tailwind/maybe-design-system.css b/app/assets/tailwind/maybe-design-system.css
index de87765faeb..26cbeb234dc 100644
--- a/app/assets/tailwind/maybe-design-system.css
+++ b/app/assets/tailwind/maybe-design-system.css
@@ -266,11 +266,6 @@
     --shadow-xl: 0px 20px 24px -4px --alpha(var(--color-white) / 8%);
   }
 
-  html {
-    padding-top: env(safe-area-inset-top);
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-
   button {
     @apply cursor-pointer focus-visible:outline-gray-900;
   }
diff --git a/app/components/DS/dialog.html.erb b/app/components/DS/dialog.html.erb
index ca8f86b7d5d..72b8c07409b 100644
--- a/app/components/DS/dialog.html.erb
+++ b/app/components/DS/dialog.html.erb
@@ -1,5 +1,5 @@
 <%= wrapper_element do %>
-  <%= tag.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay #{drawer? ? "lg:p-3" : "lg:p-1"}", **merged_opts do %>
+  <%= tag.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] #{drawer? ? "lg:p-3" : "lg:p-1"}", **merged_opts do %>
     <%= tag.div class: dialog_outer_classes do %>
       <%= tag.div class: dialog_inner_classes, data: { DS__dialog_target: "content" } do %>
         <div class="grow overflow-y-auto py-4 space-y-4 flex flex-col">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 02854276b29..cdfeab9d4c2 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -111,7 +111,7 @@
     <% end %>
 
     <%# SHARED - Main content %>
-    <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 w-full mx-auto max-w-5xl"), data: { app_layout_target: "content" } do %>
+    <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 w-full mx-auto max-w-5xl overscroll-contain [-webkit-overflow-scrolling:touch]"), data: { app_layout_target: "content" } do %>
       <div class="hidden lg:flex gap-2 items-center justify-between mb-6">
         <div class="flex items-center gap-2">
           <%= icon("panel-left", as_button: true, data: { action: "app-layout#toggleLeftSidebar" }) %>
@@ -156,7 +156,7 @@
     <% end %>
 
     <%# MOBILE - Bottom Nav %>
-    <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-[env(safe-area-inset-bottom)] border-t border-tertiary flex justify-around" do %>
+    <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 border-t border-tertiary flex justify-around" do %>
       <% mobile_nav_items.each do |nav_item| %>
         <%= render "layouts/shared/nav_item", **nav_item %>
       <% end %>
diff --git a/app/views/layouts/settings.html.erb b/app/views/layouts/settings.html.erb
index 7a6aec97892..5ad54851db6 100644
--- a/app/views/layouts/settings.html.erb
+++ b/app/views/layouts/settings.html.erb
@@ -4,9 +4,9 @@
       <%= render "settings/settings_nav" %>
     </div>
 
-    <main class="px-4 pt-2 md:py-4 md:px-10 grow flex h-full overflow-y-auto">
+    <main class="grow flex h-full">
       <div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
-        <div class="grow space-y-4 overflow-y-auto -mx-1 px-1 pb-12">
+        <div class="grow space-y-4 overflow-y-auto px-3 md:px-10 pt-2 md:py-4 pb-20 overscroll-contain [-webkit-overflow-scrolling:touch]">
           <% if content_for?(:breadcrumbs) %>
             <%= yield :breadcrumbs %>
           <% else %>
@@ -23,10 +23,10 @@
           <%= settings_nav_footer_mobile %>
         </div>
 
-        <div class="mt-4">
+        <div class="mt-4 mb-4">
           <%= settings_nav_footer %>
         </div>
       </div>
     </main>
   </div>
-<% end %>
+<% end %>
\ No newline at end of file
diff --git a/app/views/layouts/shared/_htmldoc.html.erb b/app/views/layouts/shared/_htmldoc.html.erb
index 25b0ba7730c..443d9b13398 100644
--- a/app/views/layouts/shared/_htmldoc.html.erb
+++ b/app/views/layouts/shared/_htmldoc.html.erb
@@ -7,18 +7,18 @@
   data-theme="<%= theme %>"
   data-controller="theme"
   data-theme-user-preference-value="<%= Current.user&.theme || "system" %>"
-  class="h-full text-primary overflow-hidden font-sans <%= @os %>">
+  class="h-full min-h-[100dvh] text-primary bg-surface font-sans <%= @os %>">
   <head>
     <%= render "layouts/shared/head" %>
     <%= yield :head %>
   </head>
 
-  <body class="h-full overflow-hidden antialiased">
+  <body class="h-full bg-surface overflow-hidden antialiased pt-[env(safe-area-inset-top)] pb-[min(env(safe-area-inset-bottom),16px)] touch-none">
     <% if Rails.env.development? %>
       <button hidden data-controller="hotkey" data-hotkey="t t /" data-action="theme#toggle"></button>
     <% end %>
 
-    <div class="fixed z-50 top-6 md:top-4 left-1/2 -translate-x-1/2 w-full md:w-80 px-4 md:px-0 mx-auto md:mx-0 md:right-auto mt-safe">
+    <div class="fixed z-50 top-[env(safe-area-inset-top)] md:top-4 left-1/2 -translate-x-1/2 w-full md:w-80 px-4 md:px-0 mx-auto md:mx-0 md:right-auto">
       <div id="notification-tray" class="space-y-1 w-full">
         <%= render_flash_notifications %>