Fix mobile scroll lock after backgrounding; smooth the top-bar hide/reveal (#977)

* Fix mobile scroll lock after app backgrounding: viewport lock + resume unstick

iOS can restore the app (PWA or Safari) with the window scrolled off
origin; the body then swallows touch gestures and .main-content can't
scroll until a tap breaks it loose.

Restore the html/body viewport lock removed in 1b4aae5 - it was
dropped to preserve native pull-to-refresh, which was replaced by
custom PTR the same day, so nothing needs body scroll anymore. Scoped
via :has(.app-container) so the login page still scrolls. Also snap
the window back to origin on pageshow/visibilitychange as a second
layer for cases the CSS lock can't cover.

* Drop position:fixed from viewport lock; overflow:hidden is enough

position:fixed on body disturbed the dynamic-viewport behavior the
sticky top-bar hide animation rides on, making the nav-bar hide feel
off on scroll down. overflow:hidden alone still blocks body scroll,
and the pageshow/visibilitychange handler remains the primary backstop
for the background-resume case.

* Smooth the mobile top-bar hide: translateY instead of top:-100%

The hide animated 'top' toward -100%, which resolves against the tall
scroll container (~800px), so the ~65px bar cleared the screen in the
first few ms of the 0.35s transition - an abrupt snap. Slide by
transform: translateY(-100%) (100% = the bar's own height) over 0.4s so
the full duration moves exactly one bar-height: a gradual slide.

* Slow the top-bar reveal to 0.6s, keep the hide at 0.4s

Split the transition timing: the base .top-bar rule governs the reveal
(slower, 0.6s) and .top-bar-hidden governs the hide (0.4s).

Author: tvancott42

src/NetworkOptimizer.Web/Components/Layout/MainLayout.razor

@@ -232,6 +232,16 @@
             setTimeout(function() { window.scrollBy(0, 1); window.scrollBy(0, -1); }, 100);
         });
 
+        // iOS can restore from background with the window scrolled off (0,0); the body
+        // then swallows touch gestures and .main-content can't scroll until a tap resets it
+        function unstickViewport() {
+            if (window.scrollX || window.scrollY) window.scrollTo(0, 0);
+        }
+        window.addEventListener('pageshow', unstickViewport);
+        document.addEventListener('visibilitychange', function() {
+            if (!document.hidden) setTimeout(unstickViewport, 50);
+        });
+
         // Show nav bar when content shrinks below scrollable (e.g. tab switch to short content)
         var pageContent = document.querySelector('.page-content');
         if (window.innerWidth <= 1024 && pageContent) {

src/NetworkOptimizer.Web/wwwroot/css/app.css

@@ -3176,6 +3176,16 @@ select.form-control {
 
 /* Responsive Design */
 @media (max-width: 1024px) {
+    /* Lock the viewport so only .main-content scrolls - iOS can otherwise scroll
+       the body (esp. on return from background), swallowing touch gestures.
+       overflow:hidden only (no position:fixed, which disturbs the dynamic-viewport
+       behavior the sticky top-bar hide rides on). Scoped to the app shell so the
+       login page can still scroll. */
+    html:has(.app-container),
+    body:has(.app-container) {
+        overflow: hidden;
+    }
+
     .content-grid {
         grid-template-columns: 1fr;
     }
@@ -3261,12 +3271,20 @@ select.form-control {
         height: auto;
         padding: 0.75rem 1rem;
         gap: 0.5rem;
-        transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+        /* Base transition governs the reveal (returning to this state) - slower */
+        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
+    /* Slide up by exactly the bar's own height (translateY %) so the full
+       transition is spent moving one bar-height - a gradual slide, not the
+       instant snap that top:-100% produced (that % resolves against the tall
+       scroll container, so the bar cleared the screen in a few ms).
+       Transition here governs the hide (entering this state) - kept quicker. */
     .top-bar.top-bar-hidden {
         position: sticky;
-        top: -100%;
+        top: 0;
+        transform: translateY(-100%);
+        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         pointer-events: none;
     }