Skip to content

Re: Safe Area Inset Fixes - PWA should take full screen height #237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ByteBard11 wants to merge 17 commits into
base: main
Choose a base branch
from
+10 −15
Open

Re: Safe Area Inset Fixes - PWA should take full screen height #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
6824f0a
Copy of fix(ui): iOS PWA should take full screen height #2391
ByteBard11 Aug 3, 2025
abf24f1
fix scrolling issues
ByteBard11 Oct 25, 2025
33a4201
further remove scroll on nav bars
ByteBard11 Oct 25, 2025
66e0e55
Merge branch 'we-promise:main' into pwa_fixes_2
ByteBard11 Oct 26, 2025
66dfa3d
Refactor mobile navigation tag for cleaner layout
ByteBard11 Oct 26, 2025
63ef953
Removed profiler button CSS
ByteBard11 Oct 26, 2025
089d677
Restore CSS Changes
ByteBard11 Oct 26, 2025
314e4c2
Revert "Removed profiler button CSS"
ByteBard11 Oct 26, 2025
f61ad18
Merge branch 'we-promise:main' into pwa_fixes_2
ByteBard11 Oct 28, 2025
cac542e
adjusted to remove padding from system-design css
ByteBard11 Oct 28, 2025
634f25e
Merge branch 'pwa_fixes_2' of https://github.com/ByteBard11/sure into…
ByteBard11 Oct 28, 2025
e412bc1
Merge branch 'we-promise:main' into pwa_fixes_2
ByteBard11 Nov 3, 2025
95821bb
Moved to safe areas to higher parents & fixed settings page scroll
ByteBard11 Nov 4, 2025
ed5ab19
Moved safe area inserests to higher parent containers.
ByteBard11 Nov 4, 2025
1d2b528
Merge branch 'pwa_fixes_2' of https://github.com/ByteBard11/sure into…
ByteBard11 Nov 4, 2025
834fa10
Removed uncesscary touch-none's
ByteBard11 Nov 4, 2025
d182cb5
Not sure why this is here, so removing
jjmata Dec 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions app/assets/tailwind/maybe-design-system.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,11 +266,6 @@
--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;
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/DS/dialog.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: { DS__dialog_target: "content" } do %>
<div class="grow overflow-y-auto py-4 space-y-4 flex flex-col">
Expand Down
4 changes: 2 additions & 2 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
<% end %>

<%# SHARED - Main content %>
<%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 w-full mx-auto max-w-5xl"), data: { app_layout_target: "content" } do %>
<%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 w-full mx-auto max-w-5xl overscroll-contain [-webkit-overflow-scrolling:touch]"), data: { app_layout_target: "content" } do %>
<div class="hidden lg:flex gap-2 items-center justify-between mb-6">
<div class="flex items-center gap-2">
<%= icon("panel-left", as_button: true, data: { action: "app-layout#toggleLeftSidebar" }) %>
Expand Down Expand Up @@ -156,7 +156,7 @@
<% end %>

<%# 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 %>
Expand Down
8 changes: 4 additions & 4 deletions app/views/layouts/settings.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<%= render "settings/settings_nav" %>
</div>

<main class="px-4 pt-2 md:py-4 md:px-10 grow flex h-full overflow-y-auto">
<main class="grow flex h-full">
<div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
<div class="grow space-y-4 overflow-y-auto -mx-1 px-1 pb-12">
<div class="grow space-y-4 overflow-y-auto px-3 md:px-10 pt-2 md:py-4 pb-20 overscroll-contain [-webkit-overflow-scrolling:touch]">
<% if content_for?(:breadcrumbs) %>
<%= yield :breadcrumbs %>
<% else %>
Expand All @@ -23,10 +23,10 @@
<%= settings_nav_footer_mobile %>
</div>

<div class="mt-4">
<div class="mt-4 mb-4">
<%= settings_nav_footer %>
</div>
</div>
</main>
</div>
<% end %>
<% end %>
6 changes: 3 additions & 3 deletions app/views/layouts/shared/_htmldoc.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@
data-theme="<%= theme %>"
data-controller="theme"
data-theme-user-preference-value="<%= Current.user&.theme || "system" %>"
class="h-full text-primary overflow-hidden font-sans <%= @os %>">
class="h-full min-h-[100dvh] text-primary bg-surface font-sans <%= @os %>">
<head>
<%= render "layouts/shared/head" %>
<%= yield :head %>
</head>

<body class="h-full overflow-hidden antialiased">
<body class="h-full bg-surface overflow-hidden antialiased pt-[env(safe-area-inset-top)] pb-[min(env(safe-area-inset-bottom),16px)] touch-none">
Copy link

@cursor cursor bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: touch-none on body disables all mobile touch interactions

The touch-none class added to the <body> element sets touch-action: none, which completely disables all touch interactions including scrolling, tapping, and gestures on mobile devices. According to the PR discussion, this was described as a temporary solution that was supposed to be removed ("Touch-none was a temp solution and has been removed"), but it remains in the code. This would make the PWA essentially unusable on touch devices.

Fix in Cursor Fix in Web

<% if Rails.env.development? %>
<button hidden data-controller="hotkey" data-hotkey="t t /" data-action="theme#toggle"></button>
<% end %>

<div class="fixed z-50 top-6 md:top-4 left-1/2 -translate-x-1/2 w-full md:w-80 px-4 md:px-0 mx-auto md:mx-0 md:right-auto mt-safe">
<div class="fixed z-50 top-[env(safe-area-inset-top)] md:top-4 left-1/2 -translate-x-1/2 w-full md:w-80 px-4 md:px-0 mx-auto md:mx-0 md:right-auto">
<div id="notification-tray" class="space-y-1 w-full">
<%= render_flash_notifications %>

Expand Down