feat: add draggable sidebar resizer (#100)

* feat: add draggable sidebar resizer

- Add resizer handle between map and event panel
- Sidebar width adjustable from 300px to 50% screen width
- Default width remains 400px
- Auto-adjust on window resize

* fix: preserve map zoom when resizing sidebar

Only update viewport screen size without re-fitting the map

* fix: use window size for canvas to prevent map scaling on resize

- Canvas size now based on window instead of container
- Sidebar resize only clips the visible area, map stays same size
- Remove CSS stretch on canvas element

* docs: update sidebar-resizer spec with canvas fix

docs/specs/sidebar-resizer.md

@@ -0,0 +1,48 @@
+# Sidebar Resizer 规格
+
+## 概述
+
+在地图区域和事件记录面板（sidebar）之间添加一条可拖曳的分隔线，允许用户调整 sidebar 的宽度。
+
+## 需求
+
+### 功能
+
+- 在 `.map-container` 和 `.sidebar` 之间添加一个垂直的 resizer 手柄。
+- 用户可以通过拖曳该手柄来调整 sidebar 的宽度。
+
+### 宽度限制
+
+- **最小宽度**: 300px
+- **最大宽度**: 50% 屏幕宽度
+- **默认宽度**: 400px
+
+### 持久化
+
+- 不需要持久化，每次打开页面都恢复为默认 400px。
+
+## 实现细节
+
+### 修改文件
+
+- `web/src/App.vue` - resizer 逻辑
+- `web/src/components/game/GameCanvas.vue` - canvas 尺寸调整
+
+### 技术方案
+
+1. 在 `.main-content` 中，在 `.map-container` 和 `.sidebar` 之间插入一个 `.resizer` 元素。
+2. 使用 `mousedown` / `mousemove` / `mouseup` 事件实现拖曳逻辑。
+3. 拖曳时动态计算并设置 sidebar 宽度。
+4. Canvas 使用窗口大小而非容器大小，确保拖曳 sidebar 时地图不会被缩放，只改变可视区域。
+
+### UI 细节
+
+- Resizer 宽度: 4px
+- 默认颜色: 透明或与背景融合
+- Hover/拖曳时颜色: 高亮（如 `#555` 或主题色）
+- 鼠标样式: `col-resize`
+
+### 边界处理
+
+- 拖曳超出最小/最大范围时，宽度固定在边界值。
+- 窗口 resize 时，如果当前宽度超过 50% 屏幕宽，自动调整为 50%。