功能：記分板側欄新增得分紀錄清單，並讓左右兩欄底部切齊

根本原因：
計分時只能看到當前比分，沒有逐球紀錄可回顧；且右側欄在「比賽結算」下方留有大片閒置空間。原本 .scoreboard-screen 用 align-items: start，記分板維持自然高度、側欄卻撐滿，導致兩欄底部不齊。

影響：
計分頁右側欄在比賽結算按鈕下方顯示逐球得分表：每列一球，得分隊亮綠標記並顯示當下比分，最新在最上、可上下捲動看舊資料；記分板與側欄底部切齊、不超出畫面，多出的高度分配給上下分數面板，中間橫幅維持原高度。

修法：
App 把既有 pointLog 傳入 ScoreboardPage，新增 pointHistoryRows 反序累計比分並渲染 rail-history 清單；CSS 將 .scoreboard-screen 改 align-items: stretch（配合 align-self: start + min-height 100% 讓內容過高時可自然長高不重疊），.scoreboard-court 以 minmax(min-content, 1fr) 把撐高空間讓給隊伍區與分數面板；行動版清單改跨滿整行並以 32dvh 限高。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

This commit is contained in:

JianMiau

2026-07-14 14:11:22 +08:00

co-authored by

Claude Opus 4.8

parent 540050a991

commit 68618a8e04

3 changed files with 344 additions and 21 deletions

									
										src/App.tsx
									
		+1
		
												View File
												
				@@ -1115,6 +1115,7 @@ function App() {

				              leftTeam={leftTeam}

				              liveRoomId={liveRoomId}

				              nextMatchSignal={nextMatchSignal}

				              pointLog={pointLog}

				              rightTeam={rightTeam}

				              scoreState={scoreState}

				              playCounts={playCounts}