diff --git a/frontend/src/tools/gebietseroberung.jsx b/frontend/src/tools/gebietseroberung.jsx
index 6287adf..aa0e8b2 100644
--- a/frontend/src/tools/gebietseroberung.jsx
+++ b/frontend/src/tools/gebietseroberung.jsx
@@ -215,13 +215,26 @@ function GameBoard({ game, myId, onMove, toast }) {
     else                               banner = { text: isDominance ? 'Dominanzniederlage 💀' : 'Du hast verloren.',  color:OPP_COLOR };
   }
 
-  const vw = Math.min(window.innerWidth, 600);
-  // Overhead: h2-Header(36) + Scoreboard(56) + MineAlert(0-52) + Banner(0-48) + Status(32) + Legende(28) + Puffer(32) = ~260px worst case
-  const availH   = window.innerHeight - 260;
-  const byWidth  = Math.floor((vw - 32) / GRID);
-  const byHeight = Math.floor(availH / GRID);
-  const cellSize = Math.max(10, Math.min(byWidth, byHeight));
-  const gridPx   = cellSize * GRID + 19 + 6; // gap(19) + padding(6)
+  const [cellSize, setCellSize] = useState(14);
+
+  useEffect(() => {
+    const calc = () => {
+      const vw     = Math.min(window.innerWidth, 600);
+      const vh     = window.visualViewport?.height ?? window.innerHeight;
+      // Overhead: Header(36) + Scoreboard(50) + Status(30) + Legende(26) + margins(28) = ~170px
+      const availH = vh - 170;
+      const byW    = Math.floor((vw - 32) / GRID);
+      const byH    = Math.floor(availH / GRID);
+      setCellSize(Math.max(10, Math.min(byW, byH)));
+    };
+    calc();
+    window.visualViewport?.addEventListener('resize', calc);
+    window.addEventListener('resize', calc);
+    return () => {
+      window.visualViewport?.removeEventListener('resize', calc);
+      window.removeEventListener('resize', calc);
+    };
+  }, []);
 
   // Zell-Rendering
   const renderCell = (r, c) => {
@@ -494,17 +507,17 @@ export default function HexWars({ toast }) {
 
   return (
     <div style={{ maxWidth:600, margin:'0 auto' }}>
-      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8, flexWrap:'wrap' }}>
+      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
         {activeId && (
           <button onClick={() => { setActiveId(null); setGame(null); }} style={S.btn('#666666', true)}>← Zurück</button>
         )}
-        <h2 style={{ margin:0, fontSize:15, fontFamily:'monospace', color:'rgba(255,255,255,0.55)', letterSpacing:2, fontWeight:400 }}>
+        <h2 style={{ margin:0, fontSize:13, fontFamily:'monospace', color:'rgba(255,255,255,0.55)', letterSpacing:2, fontWeight:400, flexShrink:0 }}>
           ⬡ HEX WARS
         </h2>
         <div style={{ flex:1 }} />
         <button onClick={() => setShowHelp(true)} style={S.btn('#ffe66d', true)}>? Regeln</button>
         {activeId && game?.status === 'active' && (
-          <button onClick={handleResign} style={S.btn('#ff6b9d', true)}>⚑ Aufgeben</button>
+          <button onClick={handleResign} style={S.btn('#ff6b9d', true)}>⚑</button>
         )}
       </div>