fix: Add viewport recalculation on main page load (PWA fix)

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>
This commit is contained in:
MarekWo
2026-01-01 18:12:08 +01:00
parent 11935d419a
commit bc4d29e369
+32
View File
@@ -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
*/