Merge pull request #110 from alvin000009238/codex/reduce-header-height-for-better-ux-w2l7ar

Improve header layout and read-only share UI with status badge, responsive tweaks, and accessibility updates

Author: alvin000009238

frontend/share.js

@@ -164,10 +164,8 @@ export async function checkSharedLink() {
             if (data.success) {
                 initDashboard(data.data);
 
-                document.querySelectorAll('.header-status-badge')
-                    .forEach((headerStatusBadge) => {
-                        headerStatusBadge.textContent = '僅供檢視';
-                    });
+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';
 
                 if (updateTime) updateTime.textContent = '分享存檔';
             } else {

frontend/styles/compatibility.css

@@ -66,18 +66,6 @@
 
 
 
-.share-indicator {
-
-    display: flex;
-
-    align-items: center;
-
-    margin-right: 12px;
-
-}
-
-
-
 /* Read Only Mode */
 
 body.read-only-mode .import-dropdown,

frontend/styles/header.css

@@ -247,7 +247,15 @@ body.read-only-mode .header-status-badge:empty {
 
 
 .time-label {
-    display: none;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
 
 }
 

public/index.html

@@ -72,16 +72,16 @@ <h2>中大壢中成績分析平台</h2>
                         <h1>成績分析平台</h1>
                         <div class="subtitle-row">
                             <p class="subtitle" id="examTitle">--</p>
-                            <span class="header-status-badge" aria-live="polite"></span>
+                            <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
                         </div>
                     </div>
                 </div>
                 <div class="data-time-box">
                     <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
                     <div class="time-info">
 
-                        <span class="time-label">資料更新時間</span>
-                        <span class="time-value" id="updateTime">--</span>
+                        <span class="time-label" id="updateTimeLabel">資料更新時間</span>
+                        <span class="time-value" id="updateTime" aria-labelledby="updateTimeLabel">--</span>
                     </div>
                     <div class="flex-center-gap-8 header-actions">
                         <button class="icon-btn theme-toggle-btn" id="themeToggleBtn" type="button" aria-label="切換至淺色模式"