fix: resolve promotion dialog bugs and column resizing issues

This commit addresses three critical bugs reported after initial PR:

1. **Promotion dialog not closing after piece selection**
   - Changed from `style.display` to HTML5 `.showModal()` and `.close()`
   - Fixed selector from `.promotion-piece .symbol` to `.promotion-piece .piece-icon`
   - Fixed data attribute from `dataset.type` to `dataset.piece`
   - Dialog now properly closes after user selects promotion piece

2. **Pawn showing as queen before user selection**
   - Removed automatic promotion to queen in GameController.js:112-115
   - Now emits 'promotion' event WITHOUT pre-promoting
   - User sees pawn until they select the promotion piece
   - Promotion happens only after user makes their choice

3. **Column resizing not fully fixed**
   - Added explicit `max-width: 250px` to `.game-sidebar` and `.captured-pieces`
   - Added explicit `max-width: 250px` to `.move-history-section`
   - Added `overflow: hidden` to `.captured-list` and `overflow-x: hidden` to `.move-history`
   - Added `min-width: 600px` to `.board-section`
   - Added `width: 100%` to all sidebar components for proper constraint application
   - Columns now maintain stable widths even with content changes

**Files Changed:**
- `js/main.js` - Fixed promotion dialog handling
- `js/controllers/GameController.js` - Removed auto-promotion
- `css/main.css` - Added width constraints and overflow handling

**Root Causes:**
- Dialog: Mixing HTML5 dialog API with legacy display styles
- Promotion: Auto-promoting before showing user dialog
- Resizing: Missing explicit max-widths allowed flex items to grow with content

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

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 {