<%# MOBILE - Bottom Nav %>
- <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] border-t border-tertiary flex justify-around" do %>
+ <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-[env(safe-area-inset-bottom)] 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/shared/_htmldoc.html.erb b/app/views/layouts/shared/_htmldoc.html.erb
index 302bbffd..53d277c3 100644
--- a/app/views/layouts/shared/_htmldoc.html.erb
+++ b/app/views/layouts/shared/_htmldoc.html.erb
@@ -13,7 +13,7 @@
<%= yield :head %>
-
+
<% if Rails.env.development? %>
<% end %>
--
2.53.0
From 9a160f3fd55c5275bdfa368b994dbf213f3bf96f Mon Sep 17 00:00:00 2001
From: Ken Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Mon, 23 Jun 2025 15:36:23 +0000
Subject: [PATCH 4/6] fix(ui): revert unnecessary changes
---
app/assets/tailwind/maybe-design-system.css | 1 +
app/views/layouts/application.html.erb | 4 ++--
app/views/layouts/shared/_htmldoc.html.erb | 4 ++--
3 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/app/assets/tailwind/maybe-design-system.css b/app/assets/tailwind/maybe-design-system.css
index a1b17f0f..f9dc6039 100644
--- a/app/assets/tailwind/maybe-design-system.css
+++ b/app/assets/tailwind/maybe-design-system.css
@@ -268,6 +268,7 @@
html {
padding-top: env(safe-area-inset-top);
+ padding-bottom: env(safe-area-inset-bottom);
}
button {
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index fe825477..25a98999 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -11,7 +11,7 @@
<%= render "layouts/shared/htmldoc" do %>
<%# MOBILE - Bottom Nav %>
- <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-[env(safe-area-inset-bottom)] border-t border-tertiary flex justify-around" do %>
+ <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 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/shared/_htmldoc.html.erb b/app/views/layouts/shared/_htmldoc.html.erb
index 53d277c3..db3cb203 100644
--- a/app/views/layouts/shared/_htmldoc.html.erb
+++ b/app/views/layouts/shared/_htmldoc.html.erb
@@ -7,13 +7,13 @@
data-theme="<%= theme %>"
data-controller="theme intercom"
data-theme-user-preference-value="<%= Current.user&.theme || "system" %>"
- class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>">
+ class="h-screen text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>">
<%= render "layouts/shared/head" %>
<%= yield :head %>
-
+
<% if Rails.env.development? %>
<% end %>
--
2.53.0
From 5870e2fd0c65605ad46815ed6986badca52c664b Mon Sep 17 00:00:00 2001
From: Ken Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Mon, 23 Jun 2025 16:55:19 +0000
Subject: [PATCH 5/6] fix(ui): mobile browser
---
app/assets/tailwind/maybe-design-system.css | 2 +-
app/views/layouts/shared/_htmldoc.html.erb | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/app/assets/tailwind/maybe-design-system.css b/app/assets/tailwind/maybe-design-system.css
index f9dc6039..fe1e99f2 100644
--- a/app/assets/tailwind/maybe-design-system.css
+++ b/app/assets/tailwind/maybe-design-system.css
@@ -267,7 +267,7 @@
}
html {
- padding-top: env(safe-area-inset-top);
+ margin-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
diff --git a/app/views/layouts/shared/_htmldoc.html.erb b/app/views/layouts/shared/_htmldoc.html.erb
index db3cb203..4a3a26ba 100644
--- a/app/views/layouts/shared/_htmldoc.html.erb
+++ b/app/views/layouts/shared/_htmldoc.html.erb
@@ -7,7 +7,7 @@
data-theme="<%= theme %>"
data-controller="theme intercom"
data-theme-user-preference-value="<%= Current.user&.theme || "system" %>"
- class="h-screen text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>">
+ class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>">
<%= render "layouts/shared/head" %>
<%= yield :head %>
--
2.53.0
From 6b05c75459ec37bd97c1c2e15bdd47f3d1703e16 Mon Sep 17 00:00:00 2001
From: Ken Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Mon, 23 Jun 2025 17:52:52 +0000
Subject: [PATCH 6/6] feat(ui): add top and bottom padding to dialog
---
app/components/dialog_component.html.erb | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/components/dialog_component.html.erb b/app/components/dialog_component.html.erb
index ac4cd07f..abd157fb 100644
--- a/app/components/dialog_component.html.erb
+++ b/app/components/dialog_component.html.erb
@@ -1,5 +1,5 @@
<%= 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.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] #{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 %>
--
2.53.0