fix: PWA display issues (#653)

* feat: re-apply PWA changes from previous PR

* feat: adjust padding on pages for mobile

* fix: Add position relative to netWorthChart to avoid overflow issues on mobile

* fix: Add safe-area to progress bar

* feat: add missing class on html

* fix: Replace touch-none with overscroll-none
This commit is contained in:
Alessio Cappa
2026-01-15 12:53:35 +01:00
committed by GitHub
parent 5d6abf7b48
commit fabd60c098
10 changed files with 17 additions and 18 deletions

View File

@@ -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-[100vh] text-primary bg-surface overflow-hidden overscroll-none font-sans <%= @os %>">
<head>
<%= render "layouts/shared/head" %>
<%= yield :head %>
</head>
<body class="h-full overflow-hidden antialiased">
<body class="h-[100dvh] overflow-hidden antialiased pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
<% 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-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 pt-[env(safe-area-inset-top)]">
<div id="notification-tray" class="space-y-1 w-full">
<%= render_flash_notifications %>