css/main.css

@@ -103,12 +103,16 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: 600px;
+    width: 100%;
 }
 
 .game-sidebar {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
+    width: 100%;
+    max-width: 250px;
 }
 
 .captured-pieces {
@@ -116,6 +120,8 @@ body {
     padding: 1rem;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 250px;
 }
 
 .captured-pieces h3 {
@@ -130,6 +136,8 @@ body {
     flex-wrap: wrap;
     gap: 0.5rem;
     min-height: 60px;
+    max-width: 100%;
+    overflow: hidden;
 }
 
 .move-history-section {
@@ -138,13 +146,17 @@ body {
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     flex: 1;
+    width: 100%;
+    max-width: 250px;
 }
 
 .move-history {
     max-height: 400px;
     overflow-y: auto;
+    overflow-x: hidden;
     font-family: 'Courier New', monospace;
     font-size: 0.9rem;
+    width: 100%;
 }
 
 .game-controls {

js/controllers/GameController.js

@@ -108,14 +108,11 @@ export class GameController {
             const moveResult = this.board.movePiece(fromRow, fromCol, toRow, toCol);
             captured = moveResult.captured;
 
-            // Check for promotion
+            // Check for promotion - emit event WITHOUT auto-promoting
             if (specialMoveType === 'promotion' || (piece.type === 'pawn' && piece.canPromote())) {
-                // Default to queen, UI should prompt for choice
-                const newPiece = SpecialMoves.promote(this.board, piece, 'queen');
-                promotedTo = newPiece.type;
-
-                // Emit promotion event for UI to handle
+                // Emit promotion event for UI to handle - DON'T auto-promote yet
                 this.emit('promotion', { pawn: piece, position: { row: toRow, col: toCol } });
+                // promotedTo will be set when the UI calls back with the chosen piece
             }
         }
 

js/main.js

@@ -263,7 +263,6 @@ class ChessApp {
      * @param {Position} position - Pawn position
      */
     showPromotionDialog(pawn, position) {
-        const overlay = document.getElementById('promotion-overlay');
         const dialog = document.getElementById('promotion-dialog');
 
         if (!dialog) {
@@ -271,25 +270,22 @@ class ChessApp {
             return;
         }
 
-        if (overlay) {
-            overlay.style.display = 'block';
-        }
-        dialog.style.display = 'block';
+        // Show dialog using HTML5 dialog element API
+        dialog.showModal();
 
         // Update symbols for current color
         const symbols = pawn.color === 'white' ?
             { queen: '♕', rook: '♖', bishop: '♗', knight: '♘' } :
             { queen: '♛', rook: '♜', bishop: '♝', knight: '♞' };
 
-        document.querySelectorAll('.promotion-piece .symbol').forEach(el => {
-            const type = el.parentElement.dataset.type;
+        document.querySelectorAll('.promotion-piece .piece-icon').forEach(el => {
+            const type = el.parentElement.dataset.piece;
             el.textContent = symbols[type];
-            el.style.color = pawn.color === 'white' ? '#ffffff' : '#000000';
         });
 
         // Handle selection
         const handleSelection = (e) => {
-            const pieceType = e.currentTarget.dataset.type;
+            const pieceType = e.currentTarget.dataset.piece;
 
             // Promote pawn
             import('./engine/SpecialMoves.js').then(({ SpecialMoves }) => {
@@ -297,9 +293,8 @@ class ChessApp {
                 this.updateDisplay();
             });
 
-            // Hide dialog
-            overlay.style.display = 'none';
-            dialog.style.display = 'none';
+            // Close dialog using HTML5 dialog element API
+            dialog.close();
 
             // Remove listeners
             document.querySelectorAll('.promotion-piece').forEach(el => {