Consolidate safe area padding

app/assets/tailwind/application.css

@@ -165,16 +165,4 @@
   &::-webkit-scrollbar-thumb:hover {
     background: #a6a6a6;
   }
-}
-
-.mt-safe {
-	margin-top: env(safe-area-inset-top);
-}
-
-.pt-safe {
-	padding-top: env(safe-area-inset-top);
-}
-
-.pb-safe {
-	padding-bottom: env(safe-area-inset-bottom);
 }

app/assets/tailwind/maybe-design-system.css

@@ -257,6 +257,11 @@
     --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/views/layouts/application.html.erb

@@ -131,7 +131,7 @@
     <% end %>
 
     <%# MOBILE - Bottom Nav %>
-    <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-2 border-t border-tertiary pb-safe flex justify-around" do %>
+    <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-2 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/imports.html.erb

@@ -1,5 +1,5 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="flex flex-col h-dvh bg-container pt-safe">
+  <div class="flex flex-col h-dvh bg-container">
     <header class="flex items-center justify-between p-8">
       <%= render LinkComponent.new(
         variant: "icon",

app/views/layouts/wizard.html.erb

@@ -1,5 +1,5 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="bg-container flex flex-col h-dvh pt-safe">
+  <div class="bg-container flex flex-col h-dvh">
     <header class="flex items-center justify-between p-8">
       <%= render LinkComponent.new(
         variant: "icon",

app/views/onboardings/_header.html.erb

@@ -1,4 +1,4 @@
-<header class="flex justify-between items-center p-4 pt-safe">
+<header class="flex justify-between items-center p-4">
   <%= image_tag "logo.svg", class: "h-[22px]" %>
   <div class="flex items-center gap-2">
     <%= icon("log-in", color: "secondary") %>

app/views/pages/dashboard.html.erb

@@ -1,8 +1,8 @@
 <% content_for :page_header do %>
-  <div class="space-y-1 mb-6 flex justify-between items-center lg:items-start">
+  <div class="space-y-1 mb-6 flex gap-4 justify-between items-center lg:items-start">
     <div class="space-y-1">
-      <h1 class="text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
+      <h1 class="text-xl lg:text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
-      <p class="text-gray-500">Here's what's happening with your finances</p>
+      <p class="text-sm lg:text-base text-gray-500">Here's what's happening with your finances</p>
     </div>
 
     <%= render LinkComponent.new(

app/views/settings/_settings_nav.html.erb

@@ -1,4 +1,4 @@
-<div class="pt-safe space-y-4">
+<div class="space-y-4">
   <div class="flex items-center gap-2 p-1.5">
     <%= render LinkComponent.new(
       text: "Back",