diff --git a/app/static/js/dm.js b/app/static/js/dm.js index 277a267..0f8a32a 100644 --- a/app/static/js/dm.js +++ b/app/static/js/dm.js @@ -15,6 +15,14 @@ let lastMessageTimestamp = 0; // Track latest message timestamp for smart refre document.addEventListener('DOMContentLoaded', async function() { console.log('DM page initialized'); + // Force viewport recalculation on PWA navigation + // This fixes the bottom bar visibility issue when navigating from main page + 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 localStorage loadDmLastSeenTimestamps(); @@ -40,6 +48,30 @@ document.addEventListener('DOMContentLoaded', async function() { updateStatus('connected', 'Ready'); }); +// 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 */ diff --git a/app/templates/dm.html b/app/templates/dm.html index 1174cf9..8a12224 100644 --- a/app/templates/dm.html +++ b/app/templates/dm.html @@ -57,6 +57,13 @@ max-width: 100%; } } + + /* PWA safe area handling - ensure bottom UI is visible above system bars */ + @supports (padding-bottom: env(safe-area-inset-bottom)) { + body { + padding-bottom: env(safe-area-inset-bottom); + } + }