fix: PWA display issues (#653)

* feat: re-apply PWA changes from previous PR

* feat: adjust padding on pages for mobile

* fix: Add position relative to netWorthChart to avoid overflow issues on mobile

* fix: Add safe-area to progress bar

* feat: add missing class on html

* fix: Replace touch-none with overscroll-none

app/assets/tailwind/application.css

@@ -198,3 +198,7 @@
   pointer-events: none;
   position: absolute;
 }
+
+.turbo-progress-bar {
+  margin-top: env(safe-area-inset-top);
+}

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

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

app/views/budgets/show.html.erb

@@ -1,4 +1,4 @@
-<div class="pb-12">
+<div class="pb-6 lg:pb-12">
   <%= render "budgets/budget_header",
             budget: @budget,
             previous_budget: @previous_budget,

app/views/layouts/application.html.erb

@@ -112,7 +112,7 @@
     <% end %>
 
     <%# SHARED - Main content %>
-    <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 pb-20 lg:pb-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"), 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" }) %>
@@ -157,7 +157,7 @@
     <% end %>
 
     <%# MOBILE - Bottom Nav %>
-    <%= tag.nav class: "lg:hidden fixed bottom-0 left-0 right-0 bg-surface z-10 pb-[env(safe-area-inset-bottom)] border-t border-tertiary flex justify-around" do %>
+    <%= tag.nav class: "lg:hidden sticky bottom-0 left-0 right-0 bg-surface 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 %>

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,7 +23,7 @@
           <%= settings_nav_footer_mobile %>
         </div>
 
-        <div class="mt-4">
+        <div class="my-4">
           <%= settings_nav_footer %>
         </div>
       </div>

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-[100vh] text-primary bg-surface overflow-hidden overscroll-none font-sans <%= @os %>">
   <head>
     <%= render "layouts/shared/head" %>
     <%= yield :head %>
   </head>
 
-  <body class="h-full overflow-hidden antialiased">
+  <body class="h-[100dvh] overflow-hidden antialiased pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
     <% 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-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 pt-[env(safe-area-inset-top)]">
       <div id="notification-tray" class="space-y-1 w-full">
         <%= render_flash_notifications %>
 

app/views/pages/dashboard/_net_worth_chart.html.erb

@@ -26,7 +26,7 @@
   <% if series.any? %>
     <div
     id="netWorthChart"
-    class="w-full flex-1 min-h-52"
+    class="w-full flex-1 relative min-h-52"
     data-controller="time-series-chart"
     data-time-series-chart-data-value="<%= series.to_json %>"></div>
   <% else %>

app/views/reports/index.html.erb

@@ -96,7 +96,7 @@
   </div>
 <% end %>
 
-<div class="w-full space-y-6 pb-4 lg:pb-6">
+<div class="w-full space-y-6 lg:pb-6">
   <% if Current.family.transactions.any? %>
     <%# Summary Dashboard - Always visible, not collapsible %>
     <section>

app/views/transactions/index.html.erb

@@ -1,4 +1,4 @@
-<div class="space-y-4 pb-20 flex flex-col">
+<div class="space-y-4 pb-6 lg:pb-12 flex flex-col">
   <header class="flex justify-between items-center text-primary font-medium">
     <h1 class="text-xl">Transactions</h1>
     <div class="flex items-center gap-5">