diff --git a/src/app/event-handlers.ts b/src/app/event-handlers.ts
index d441d9725..4127bb83e 100644
--- a/src/app/event-handlers.ts
+++ b/src/app/event-handlers.ts
@@ -361,6 +361,7 @@ export class EventHandlerManager implements AppModule {
       this.boundFullscreenHandler = () => {
         fullscreenBtn.textContent = document.fullscreenElement ? '\u26F6' : '\u26F6';
         fullscreenBtn.classList.toggle('active', !!document.fullscreenElement);
+        this.syncMapAfterLayoutChange();
       };
       document.addEventListener('fullscreenchange', this.boundFullscreenHandler);
     }
@@ -733,6 +734,16 @@ export class EventHandlerManager implements AppModule {
     };
   }
 
+  private syncMapAfterLayoutChange(delayMs = 320): void {
+    const sync = () => {
+      this.ctx.map?.setIsResizing(false);
+      this.ctx.map?.resize();
+    };
+
+    requestAnimationFrame(sync);
+    window.setTimeout(sync, delayMs);
+  }
+
   private async exitFullscreenForNavigation(): Promise<void> {
     const fullscreenDocument = this.getFullscreenDocument();
     if (!fullscreenDocument.fullscreenElement && !fullscreenDocument.webkitFullscreenElement) return;
@@ -1228,8 +1239,7 @@ export class EventHandlerManager implements AppModule {
       document.body.classList.toggle('live-news-fullscreen-active', isFullscreen);
       btn.innerHTML = isFullscreen ? shrinkSvg : expandSvg;
       btn.title = isFullscreen ? 'Exit fullscreen' : 'Fullscreen';
-      // Notify map so globe (and deck.gl) can resize after CSS transition completes
-      setTimeout(() => this.ctx.map?.setIsResizing(false), 320);
+      this.syncMapAfterLayoutChange();
     };
 
     btn.addEventListener('click', toggle);
diff --git a/tests/map-fullscreen-resize.test.mjs b/tests/map-fullscreen-resize.test.mjs
new file mode 100644
index 000000000..cd54a76d6
--- /dev/null
+++ b/tests/map-fullscreen-resize.test.mjs
@@ -0,0 +1,30 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = resolve(__dirname, '..');
+const src = readFileSync(join(root, 'src', 'app', 'event-handlers.ts'), 'utf-8');
+
+describe('map fullscreen resize sync', () => {
+  it('defines a shared layout-sync helper that calls resize()', () => {
+    assert.match(src, /private syncMapAfterLayoutChange\(delayMs = 320\): void \{/);
+    assert.match(src, /this\.ctx\.map\?\.resize\(\)/);
+    assert.match(src, /requestAnimationFrame\(sync\)/);
+    assert.match(src, /window\.setTimeout\(sync, delayMs\)/);
+  });
+
+  it('re-syncs the map after browser fullscreen changes', () => {
+    const fullscreenHandlerBlock = src.match(/this\.boundFullscreenHandler = \(\) => \{([\s\S]*?)\n\s*\};/);
+    assert.ok(fullscreenHandlerBlock, 'Expected fullscreenchange handler block');
+    assert.match(fullscreenHandlerBlock[1], /this\.syncMapAfterLayoutChange\(\)/);
+  });
+
+  it('re-syncs the map after map-panel fullscreen toggles', () => {
+    const mapFullscreenBlock = src.match(/setupMapFullscreen[\s\S]*?const toggle = \(\) => \{([\s\S]*?)\n\s*\};/);
+    assert.ok(mapFullscreenBlock, 'Expected map fullscreen toggle block inside setupMapFullscreen');
+    assert.match(mapFullscreenBlock[1], /this\.syncMapAfterLayoutChange\(\)/);
+  });
+});