UI/mobile keyboard and pwa popup fixes (#24610)

* ui: make mobile layout keyboard-aware via interactive-widget and dvh shell anchor

* ui: fix duplicate PWA refresh popup by scoping the storage check to non-PWA pages

diff --git a/tools/ui/src/app.html b/tools/ui/src/app.html
index db3e9edf5e1ed18dca9cd40e82f3bf92de490440..e1de226dcb81aeda17bfa00dd525693cbe66f5a5 100644 (file)
--- a/tools/ui/src/app.html
+++ b/tools/ui/src/app.html
@@ -9,7 +9,10 @@
 
                <link rel="manifest" href="./manifest.webmanifest" />
 
-               <meta name="viewport" content="width=device-width, initial-scale=1" />
+               <meta
+                       name="viewport"
+                       content="width=device-width, initial-scale=1, interactive-widget=resizes-content"
+               />
                %sveltekit.head%
        </head>
 

diff --git a/tools/ui/src/lib/components/ui/sidebar/sidebar-provider.svelte b/tools/ui/src/lib/components/ui/sidebar/sidebar-provider.svelte
index e77641c2e0b3c596d63d96dc466517ecbc59ad49..9fd270403ea0fb2d383b53e1248bcc7bec63d289 100644 (file)
--- a/tools/ui/src/lib/components/ui/sidebar/sidebar-provider.svelte
+++ b/tools/ui/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -41,7 +41,7 @@
        data-slot="sidebar-wrapper"
        style="--sidebar-width: {sidebar.sidebarWidth}; --sidebar-min-width: {SIDEBAR_MIN_WIDTH}; --sidebar-max-width: {SIDEBAR_MAX_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
        class={cn(
-               'group/sidebar-wrapper flex flex-col min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+               'group/sidebar-wrapper flex flex-col h-dvh w-full has-data-[variant=inset]:bg-sidebar',
                className
        )}
        bind:this={ref}

diff --git a/tools/ui/src/lib/hooks/use-pwa.svelte.ts b/tools/ui/src/lib/hooks/use-pwa.svelte.ts
index e720253e730b715eda47b3a36c99efc03249bb3a..e1f46e1bc2771e128037124374e9fd76b5be5cef 100644 (file)
--- a/tools/ui/src/lib/hooks/use-pwa.svelte.ts
+++ b/tools/ui/src/lib/hooks/use-pwa.svelte.ts
@@ -53,6 +53,8 @@ export function usePwa() {
        // This comparison detects server upgrades for non-PWA users.
        $effect(() => {
                if (!browser) return;
+               // PWA pages update via the service worker path; the storage check is the non-PWA fallback only
+               if (navigator.serviceWorker?.controller) return;
 
                const currentVersion = versionStore.value;
                if (!currentVersion) return;