Merge pull request #104 from alvin000009238/codex/reduce-header-height-for-better-ux-cmpi18

Show read-only status via header badge and refactor header styles/responsiveness

Author: alvin000009238

frontend/styles/compatibility.css

@@ -100,4 +100,8 @@ body.read-only-mode .header {
 
 }
 
+body.read-only-mode .data-time-box {
+    width: 100%;
+    justify-content: space-between;
+}
 

frontend/styles/header.css

@@ -213,6 +213,10 @@ body.read-only-mode .header-status-badge {
     display: inline-flex;
 }
 
+body.read-only-mode .header-status-badge:empty {
+    display: none;
+}
+
 .header-actions {
     justify-content: flex-end;
     flex-wrap: nowrap;
@@ -232,7 +236,7 @@ body.read-only-mode .header-status-badge {
 
     border-right: 1px solid var(--color-border-subtle);
 
-    align-items: flex-end;
+    align-items: center;
 
 }
 
@@ -314,7 +318,7 @@ body.read-only-mode .header-status-badge {
 
     border: none;
 
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-sm);
 
     color: var(--md-sys-color-on-primary);
 

public/index.html

@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-D-IViaAQ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-bt8E1vXG.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -528,7 +528,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-eCe3WGCp.js"></script>
+    <script type="module" src="/dist/main-D-w4GNFQ.js"></script>
 </body>
 
 </html>