Mobile layout fixes (#2179)

* Consolidate safe area padding

* Fix chat overflow on mobile

app/views/layouts/application.html.erb

@@ -11,13 +11,13 @@
 
 <%= render "layouts/shared/htmldoc" do %>
   <div
-    class="flex flex-col lg:flex-row h-dvh lg:h-full bg-surface"
+    class="flex flex-col lg:flex-row h-full bg-surface"
     data-controller="app-layout"
     data-app-layout-expanded-sidebar-class="<%= expanded_sidebar_class %>"
     data-app-layout-collapsed-sidebar-class="<%= collapsed_sidebar_class %>"
     data-app-layout-user-id-value="<%= Current.user.id %>">
     <div
-      class="hidden fixed inset-0 bg-surface z-20 h-dvh w-full p-3 overflow-y-auto transition-all duration-300"
+      class="hidden fixed inset-0 bg-surface z-20 h-full w-full p-3 overflow-y-auto transition-all duration-300"
       data-app-layout-target="mobileSidebar">
       <div class="mb-2">
         <%= icon("x", as_button: true, data: { action: "app-layout#closeMobileSidebar" }) %>
@@ -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/auth.html.erb

@@ -1,6 +1,6 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="flex flex-col h-dvh">
-    <div class="flex flex-col h-screen px-6 py-12 bg-surface">
+  <div class="flex flex-col h-full">
+    <div class="flex flex-col h-full px-6 py-12 bg-surface">
       <div class="grow flex flex-col justify-center">
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
           <div class="flex justify-center mt-2 md:mb-6">

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-full bg-container">
     <header class="flex items-center justify-between p-8">
       <%= render LinkComponent.new(
         variant: "icon",

app/views/layouts/shared/_confirm_dialog.html.erb

@@ -1,6 +1,6 @@
 <%# This dialog is used as an override to the browser's confirm API when submitting forms with data-turbo-confirm %>
 <%# See confirm_dialog_controller.js and _htmldoc.html.erb  %>
-<%= render DialogComponent.new(id: "confirm-dialog", auto_open: false, data: { controller: "confirm-dialog" }, width: "sm") do |dialog| %>
+<%= render DialogComponent.new(id: "confirm-dialog", auto_open: false, data: { controller: "confirm-dialog" }, width: "sm", disable_frame: true) do |dialog| %>
   <% dialog.with_body do %>
     <form method="dialog" class="space-y-4">
       <div class="space-y-2">

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

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",
@@ -146,7 +146,7 @@
       </li>
 
       <%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-destructive hover:bg-surface-hover w-full" do %>
-        <%= icon("log-out") %>
+        <%= icon("log-out", color: "current") %>
         <span><%= t(".logout") %></span>
       <% end %>
 

app/views/settings/profiles/show.html.erb

@@ -136,7 +136,13 @@
           variant: "destructive",
           href: reset_user_path(@user),
           method: :delete,
-          confirm: CustomConfirm.for_resource_deletion("Account", high_severity: true)
+          confirm: CustomConfirm.new(
+            title: "Reset account?",
+            body: "This will delete all data associated with your account. Your user profile will remain active.",
+            btn_text: "Reset account",
+            destructive: true,
+            high_severity: true
+          )
         ) %>
       </div>
     <% end %>