From bc4d29e36911f890a4ab5eca7e7f48bfc81a6325 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Thu, 1 Jan 2026 18:12:08 +0100
Subject: [PATCH] fix: Add viewport recalculation on main page load (PWA fix)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The main page (app.js) was missing viewport recalculation logic
that was already present in dm.js, causing layout corruption when
returning from other pages in PWA mode.

Changes:
- Add viewport recalculation in DOMContentLoaded:
  - window.scrollTo(0, 0) - reset scroll position
  - window.dispatchEvent(new Event('resize')) - trigger reflow
  - document.body.offsetHeight - force layout recalculation

- Add pageshow event listener:
  - Handles page restoration from browser cache (Back button)
  - Recalculates viewport when event.persisted is true

- Add visibilitychange event listener:
  - Handles PWA returning from background
  - 100ms delay to ensure proper timing

This fixes the issue where:
1. User opens menu on main page
2. Navigates to Contact Management
3. Clicks Home button to return
4. Status bar is hidden under Android system buttons

The viewport wasn't being recalculated after navigation,
leaving the layout with incorrect heights from cached state.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/static/js/app.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index dd7f966..70ba4d6 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -49,6 +49,14 @@ window.navigateTo = function(url) {
 document.addEventListener('DOMContentLoaded', async function() {
     console.log('mc-webui initialized');
 
+    // Force viewport recalculation on PWA navigation
+    // This fixes the bottom bar visibility issue when navigating from other pages
+    window.scrollTo(0, 0);
+    // Trigger resize event to force browser to recalculate viewport height
+    window.dispatchEvent(new Event('resize'));
+    // Force reflow to ensure proper layout calculation
+    document.body.offsetHeight;
+
     // Load last seen timestamps from server
     await loadLastSeenTimestampsFromServer();
     await loadDmLastSeenTimestampsFromServer();
@@ -78,6 +86,30 @@ document.addEventListener('DOMContentLoaded', async function() {
     setupAutoRefresh();
 });
 
+// Handle page restoration from cache (PWA back/forward navigation)
+window.addEventListener('pageshow', function(event) {
+    if (event.persisted) {
+        // Page was restored from cache, force viewport recalculation
+        console.log('Page restored from cache, recalculating viewport');
+        window.scrollTo(0, 0);
+        window.dispatchEvent(new Event('resize'));
+        document.body.offsetHeight;
+    }
+});
+
+// Handle app returning from background (PWA visibility change)
+document.addEventListener('visibilitychange', function() {
+    if (!document.hidden) {
+        // App became visible again, force viewport recalculation
+        console.log('App became visible, recalculating viewport');
+        setTimeout(() => {
+            window.scrollTo(0, 0);
+            window.dispatchEvent(new Event('resize'));
+            document.body.offsetHeight;
+        }, 100);
+    }
+});
+
 /**
  * Setup event listeners
  */