From 6e453f38bdc40fced1baf378b9c86d6291c18395 Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach.gollwitzer@gmail.com>
Date: Wed, 30 Apr 2025 21:00:12 -0400
Subject: [PATCH] Consolidate safe area padding

---
 app/assets/tailwind/application.css         | 12 ------------
 app/assets/tailwind/maybe-design-system.css |  5 +++++
 app/views/layouts/application.html.erb      |  2 +-
 app/views/layouts/imports.html.erb          |  2 +-
 app/views/layouts/wizard.html.erb           |  2 +-
 app/views/onboardings/_header.html.erb      |  2 +-
 app/views/pages/dashboard.html.erb          |  6 +++---
 app/views/settings/_settings_nav.html.erb   |  2 +-
 8 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index cb3d5852..f97f63a5 100644
--- a/app/assets/tailwind/application.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/app/assets/tailwind/maybe-design-system.css b/app/assets/tailwind/maybe-design-system.css
index d29b5c04..a7d5b89c 100644
--- a/app/assets/tailwind/maybe-design-system.css
+++ b/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;
   }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 42275c90..5c30f2c2 100644
--- a/app/views/layouts/application.html.erb
+++ b/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 %>
diff --git a/app/views/layouts/imports.html.erb b/app/views/layouts/imports.html.erb
index 6b73ad67..5e0de6d7 100644
--- a/app/views/layouts/imports.html.erb
+++ b/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",
diff --git a/app/views/layouts/wizard.html.erb b/app/views/layouts/wizard.html.erb
index 1be2229d..84067995 100644
--- a/app/views/layouts/wizard.html.erb
+++ b/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",
diff --git a/app/views/onboardings/_header.html.erb b/app/views/onboardings/_header.html.erb
index 14dabc5e..8ba333c1 100644
--- a/app/views/onboardings/_header.html.erb
+++ b/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") %>
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb
index 298e48e3..97eada58 100644
--- a/app/views/pages/dashboard.html.erb
+++ b/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>
-      <p class="text-gray-500">Here's what's happening with your finances</p>
+      <h1 class="text-xl lg:text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
+      <p class="text-sm lg:text-base text-gray-500">Here's what's happening with your finances</p>
     </div>
 
     <%= render LinkComponent.new(
diff --git a/app/views/settings/_settings_nav.html.erb b/app/views/settings/_settings_nav.html.erb
index 0a035206..29e3994e 100644
--- a/app/views/settings/_settings_nav.html.erb
+++ b/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",