Fix chat overflow on mobile

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

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

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" }) %>

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">
+  <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">
+  <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/settings/_settings_nav.html.erb

@@ -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 %>