1080p layout fixes: responsive location sizing, dynamic entity limits, compass cleanup

pwa/src/components/GameHeader.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { useAuth } from '../hooks/useAuth'
 import { useGameWebSocket } from '../hooks/useGameWebSocket'
@@ -34,6 +34,28 @@ export default function GameHeader({
   const { currentCharacter, logout } = useAuth()
   const { t } = useTranslation()
   const [playerCount, setPlayerCount] = useState<number>(0)
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(!!document.fullscreenElement)
+
+  // Fullscreen toggle
+  const toggleFullscreen = useCallback(() => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch((err) => {
+        console.error('Failed to enter fullscreen:', err)
+      })
+    } else {
+      document.exitFullscreen().catch((err) => {
+        console.error('Failed to exit fullscreen:', err)
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement)
+    }
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
+    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  }, [])
 
   // Get game state from context (undefined when outside GameProvider)
   const gameContext = useOptionalGame()
@@ -149,6 +171,16 @@ export default function GameHeader({
 
         <LanguageSelector />
 
+        <GameTooltip content={isFullscreen ? t('common.exitFullscreen', 'Exit Fullscreen') : t('common.fullscreen', 'Fullscreen')}>
+          <button
+            onClick={toggleFullscreen}
+            className="header-icon-btn"
+            aria-label={isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+          >
+            {isFullscreen ? '🗗' : '🗖'}
+          </button>
+        </GameTooltip>
+
         <button
           onClick={() => navigate(`/profile/${currentCharacter?.id}`)}
           className={`username-link ${isOnOwnProfile ? 'active' : ''}`}