From f50b11600eb51e1cad8c9d5cfef463f6c02fcb1e Mon Sep 17 00:00:00 2001
From: JianMiau <bir840124@gmail.com>
Date: Thu, 16 Apr 2026 14:37:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AA=BF=E6=95=B4=E5=88=86=E7=B5=84=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E7=89=88=E9=9D=A2=E4=B8=A6=E6=9B=B4=E6=96=B0=20README?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                       |  1 +
 src/App.css                     | 48 +++++++++++++++++++++++++++++----
 src/App.tsx                     |  2 --
 src/pages/TeamSelectionPage.tsx | 10 ++-----
 4 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index d3783f4..7975b69 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@
   - 若當天沒有資料，可手動輸入 A、B 區名單建立分組
   - 成功載入後會在畫面底部顯示 1 秒浮動提示
   - 對戰名單直接點 `進入記分板` 就會帶入該組
+  - 分組卡片標題改成左右緊湊排列，減少手機版高度
 - 記分板頁
   - 從所選組別進入記分板
   - 設定隊伍彈窗支援兩種方式
diff --git a/src/App.css b/src/App.css
index cb19d1e..917bcfb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -121,6 +121,18 @@
   align-items: start;
 }
 
+.group-head-compact {
+  align-items: center;
+}
+
+.group-head-compact > div:first-child {
+  min-width: 0;
+}
+
+.group-head-compact h3 {
+  margin: 4px 0 0;
+}
+
 .summary-grid,
 .double-grid,
 .history-list,
@@ -223,6 +235,10 @@
   align-items: end;
 }
 
+.selection-toolbar > .field {
+  width: min(100%, 220px);
+}
+
 .double-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -302,11 +318,6 @@
   border: 1px solid rgba(10, 51, 45, 0.08);
 }
 
-.group-card-active {
-  border-color: rgba(8, 47, 73, 0.32);
-  box-shadow: 0 0 0 2px rgba(8, 47, 73, 0.08);
-}
-
 .group-card-stage {
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 242, 0.94));
@@ -1304,6 +1315,15 @@
     flex-direction: column;
   }
 
+  .group-head-compact {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .group-head-compact .group-actions {
+    flex-shrink: 0;
+  }
+
   .scoreboard-screen {
     grid-template-columns: 1fr;
   }
@@ -1365,6 +1385,10 @@
     gap: 12px;
   }
 
+  .selection-toolbar > .field {
+    width: 100%;
+  }
+
   .button-stack {
     grid-template-columns: 1fr;
   }
@@ -1372,6 +1396,7 @@
   .field input[type='date'] {
     max-width: 100%;
     font-size: 16px;
+    overflow: hidden;
   }
 
   .floating-status-bubble {
@@ -1382,6 +1407,19 @@
     font-size: 0.92rem;
   }
 
+  .group-head-compact {
+    gap: 10px;
+  }
+
+  .group-head-compact h3 {
+    font-size: 1rem;
+  }
+
+  .group-head-compact .inline-link {
+    padding: 8px 12px;
+    white-space: nowrap;
+  }
+
   .scoreboard-court {
     gap: 10px;
     padding: 8px;
diff --git a/src/App.tsx b/src/App.tsx
index 8e489c2..885075b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -462,7 +462,6 @@ function App() {
               groupSource={groupSource}
               loadMessage={loadMessage}
               loadStatus={loadStatus}
-              selectedGroupId={selectedGroupId}
               targetDate={targetDate}
               onAreaAInputChange={setAreaAInput}
               onAreaBInputChange={setAreaBInput}
@@ -483,7 +482,6 @@ function App() {
               groupSource={groupSource}
               loadMessage={loadMessage}
               loadStatus={loadStatus}
-              selectedGroupId={selectedGroupId}
               targetDate={targetDate}
               onAreaAInputChange={setAreaAInput}
               onAreaBInputChange={setAreaBInput}
diff --git a/src/pages/TeamSelectionPage.tsx b/src/pages/TeamSelectionPage.tsx
index 64500ed..8bd53b5 100644
--- a/src/pages/TeamSelectionPage.tsx
+++ b/src/pages/TeamSelectionPage.tsx
@@ -9,7 +9,6 @@ type TeamSelectionPageProps = {
   groupSource: 'idle' | 'db' | 'manual'
   loadMessage: string
   loadStatus: LoadStatus
-  selectedGroupId: number | null
   targetDate: string
   onAreaAInputChange: (value: string) => void
   onAreaBInputChange: (value: string) => void
@@ -26,7 +25,6 @@ export function TeamSelectionPage({
   groupSource,
   loadMessage,
   loadStatus,
-  selectedGroupId,
   targetDate,
   onAreaAInputChange,
   onAreaBInputChange,
@@ -106,17 +104,13 @@ export function TeamSelectionPage({
             <p className="panel-kicker">Step 2</p>
             <h2>選擇要上場的組別</h2>
           </div>
-          {selectedGroupId ? <span className="winner-badge">目前第 {selectedGroupId} 組</span> : null}
         </div>
 
         <div className="group-board">
           {hasGroups ? (
             groups.map((group) => (
-              <article
-                key={group.id}
-                className={`group-card ${selectedGroupId === group.id ? 'group-card-active' : ''}`}
-              >
-                <div className="group-head">
+              <article key={group.id} className="group-card">
+                <div className="group-head group-head-compact">
                   <div>
                     <p className="panel-kicker">第 {group.id} 組</p>
                     <h3>本組對戰名單</h3>