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