From 1a79b4ed557ba2820b4a57a6d123f750165c237c Mon Sep 17 00:00:00 2001
From: AskaEth <i@yeij.top>
Date: Sun, 16 Aug 2026 18:47:29 +0800
Subject: [PATCH] fix: media card survives page switch, cards fill column
 height

---
 app/src/main/assets/h5/css/app.css      | 10 ++++++++++
 app/src/main/assets/h5/js/pages/home.js | 15 +++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/app/src/main/assets/h5/css/app.css b/app/src/main/assets/h5/css/app.css
index fac6438..48fddb7 100644
--- a/app/src/main/assets/h5/css/app.css
+++ b/app/src/main/assets/h5/css/app.css
@@ -142,6 +142,10 @@ body {
 /* 卡片：柔光玻璃拟态（复用 Task 4 token，非纯色背景） */
 /* Card: soft-glass morphism (reuse Task 4 tokens, not a solid color) */
 .card {
+  /* 卡片在栏内自动拉伸填满高度（多卡均分） */
+  /* Cards stretch to fill the column height (even split when multiple) */
+  flex: 1 1 0;
+  min-height: 0;
   background: var(--glass-bg);
   backdrop-filter: var(--blur-filter);
   -webkit-backdrop-filter: var(--blur-filter);
@@ -154,6 +158,12 @@ body {
 
 /* 大字时间卡：主时间大字 + 日期副行 */
 /* Big time card: large clock + date subtitle */
+/* 时钟卡缩放权重小：占栏高比例小于其他卡片 */
+/* Time card grows less: takes a smaller share of column height than other cards */
+.time-card {
+  flex-grow: 0.5;
+}
+
 .time-card .big {
   font-size: 56px;
   font-weight: 300;
diff --git a/app/src/main/assets/h5/js/pages/home.js b/app/src/main/assets/h5/js/pages/home.js
index e2f8f15..4a47b52 100644
--- a/app/src/main/assets/h5/js/pages/home.js
+++ b/app/src/main/assets/h5/js/pages/home.js
@@ -28,6 +28,16 @@ window.updateHomeCards = async function () {
       else col.appendChild(renderGenericCard(id));
     });
   });
+  // 若有当前媒体，覆盖中间栏为媒体卡（切页回来后恢复媒体卡）
+  // If there is active media, replace the middle column with the media card
+  // (restores the media card when navigating back to home)
+  if (currentMedia) {
+    const mediaCol = document.getElementById('col-1');
+    if (mediaCol) {
+      mediaCol.innerHTML = '';
+      mediaCol.appendChild(renderMediaCard(currentMedia));
+    }
+  }
   startTimeCardTicker();
 };
 
@@ -80,11 +90,16 @@ function startTimeCardTicker() {
   }, 1000);
 }
 
+// 当前媒体信息（null 表示无媒体）；切页后 updateHomeCards 据此恢复媒体卡
+// Current media info (null = none); updateHomeCards restores the media card from it
+let currentMedia = null;
+
 // 原生媒体会话事件：有媒体时在中间栏渲染媒体卡，无媒体时降级重新布局
 // Native media session event: render media card in middle column when present,
 // otherwise fall back to re-layout (calendar/weather fill the media card slot)
 window.HearthEvents = window.HearthEvents || {};
 window.HearthEvents.mediaSessionChanged = function (info) {
+  currentMedia = info;
   const mediaCol = document.getElementById('col-1');
   if (!mediaCol) return;
   if (info) {