調整分組卡片版面並更新 README

README.md

@@ -9,6 +9,7 @@
   - 若當天沒有資料，可手動輸入 A、B 區名單建立分組
   - 成功載入後會在畫面底部顯示 1 秒浮動提示
   - 對戰名單直接點 `進入記分板` 就會帶入該組
+  - 分組卡片標題改成左右緊湊排列，減少手機版高度
 - 記分板頁
   - 從所選組別進入記分板
   - 設定隊伍彈窗支援兩種方式

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;

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}

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
+              <article key={group.id} className="group-card">
-                key={group.id}
+                <div className="group-head group-head-compact">
-                className={`group-card ${selectedGroupId === group.id ? 'group-card-active' : ''}`}
-              >
-                <div className="group-head">
                   <div>
                     <p className="panel-kicker">第 {group.id} 組</p>
                     <h3>本組對戰名單</h3>