From d8cf35eca750812faa21a835f18a19e3b6f1d377 Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach@maybe.co>
Date: Wed, 30 Apr 2025 22:24:13 -0400
Subject: [PATCH] Mobile layout fixes (#2179)

* Consolidate safe area padding

* Fix chat overflow on mobile
---
 app/assets/tailwind/application.css             | 12 ------------
 app/assets/tailwind/maybe-design-system.css     |  5 +++++
 app/components/dialog_component.html.erb        |  4 ++--
 app/components/dialog_component.rb              | 17 +++++++++++------
 app/views/layouts/application.html.erb          |  6 +++---
 app/views/layouts/auth.html.erb                 |  4 ++--
 app/views/layouts/imports.html.erb              |  2 +-
 .../layouts/shared/_confirm_dialog.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       |  4 ++--
 app/views/settings/profiles/show.html.erb       |  8 +++++++-
 13 files changed, 39 insertions(+), 35 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/components/dialog_component.html.erb b/app/components/dialog_component.html.erb
index 8b2a67be..5f2ef647 100644
--- a/app/components/dialog_component.html.erb
+++ b/app/components/dialog_component.html.erb
@@ -1,4 +1,4 @@
-<turbo-frame id="<%= frame %>">
+<%= 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.div class: dialog_outer_classes do %>
       <%= tag.div class: dialog_inner_classes, data: { dialog_target: "content" } do %>
@@ -35,4 +35,4 @@
       <% end %>
     <% end %>
   <% end %>
-</turbo-frame>
+<% end %>
diff --git a/app/components/dialog_component.rb b/app/components/dialog_component.rb
index 16f04bdc..97788691 100644
--- a/app/components/dialog_component.rb
+++ b/app/components/dialog_component.rb
@@ -33,7 +33,7 @@ class DialogComponent < ViewComponent::Base
     end
   end
 
-  attr_reader :variant, :auto_open, :reload_on_close, :frame, :width, :opts
+  attr_reader :variant, :auto_open, :reload_on_close, :width, :disable_frame, :opts
 
   VARIANTS = %w[modal drawer].freeze
   WIDTHS = {
@@ -43,17 +43,22 @@ class DialogComponent < ViewComponent::Base
     full: "lg:max-w-full"
   }.freeze
 
-  def initialize(variant: "modal", auto_open: true, reload_on_close: false, frame: nil, width: "md", **opts)
+  def initialize(variant: "modal", auto_open: true, reload_on_close: false, width: "md", disable_frame: false, **opts)
     @variant = variant.to_sym
     @auto_open = auto_open
     @reload_on_close = reload_on_close
-    @frame = frame
     @width = width.to_sym
+    @disable_frame = disable_frame
     @opts = opts
   end
 
-  def frame
-    @frame || variant
+  # Caller must "opt-out" of using the default turbo-frame based on the variant
+  def wrapper_element(&block)
+    if disable_frame
+      content_tag(:div, &block)
+    else
+      content_tag("turbo-frame", id: variant, &block)
+    end
   end
 
   def dialog_outer_classes
@@ -80,7 +85,7 @@ class DialogComponent < ViewComponent::Base
     end
 
     class_names(
-      "flex flex-col bg-container lg:rounded-xl lg:shadow-border-xs w-full overflow-hidden",
+      "flex flex-col bg-container rounded-xl shadow-border-xs mx-3 lg:mx-0 w-full overflow-hidden",
       variant_classes
     )
   end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 42275c90..6766bb0b 100644
--- a/app/views/layouts/application.html.erb
+++ b/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 %>
diff --git a/app/views/layouts/auth.html.erb b/app/views/layouts/auth.html.erb
index 42930812..56be3236 100644
--- a/app/views/layouts/auth.html.erb
+++ b/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">
diff --git a/app/views/layouts/imports.html.erb b/app/views/layouts/imports.html.erb
index 6b73ad67..258cc0a4 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-full bg-container">
     <header class="flex items-center justify-between p-8">
       <%= render LinkComponent.new(
         variant: "icon",
diff --git a/app/views/layouts/shared/_confirm_dialog.html.erb b/app/views/layouts/shared/_confirm_dialog.html.erb
index 4709ffb4..8e513755 100644
--- a/app/views/layouts/shared/_confirm_dialog.html.erb
+++ b/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">
diff --git a/app/views/layouts/wizard.html.erb b/app/views/layouts/wizard.html.erb
index 1be2229d..a4c5c408 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-full">
     <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..d7548731 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",
@@ -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 %>
 
diff --git a/app/views/settings/profiles/show.html.erb b/app/views/settings/profiles/show.html.erb
index e375f2ad..00858024 100644
--- a/app/views/settings/profiles/show.html.erb
+++ b/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 %>