From cd83c358cf3d0b0532f380003ae21216f59d72d5 Mon Sep 17 00:00:00 2001
From: km2023 <os11353325@gmail.com>
Date: Tue, 30 Jun 2026 15:15:46 +0800
Subject: [PATCH] fix(home): move dialog out of 9:16 canvas so it stays
 screen-fixed

The home dialog used bottom-[15.8%] inside the 9:16 canvas, whose height scales with width (h = w*16/9), so the dialog drifted vertically as viewport width changed. Moved the dialog block to the screen-container layer beside the tab bar, so it now shares the tab's screen-relative anchoring and no longer moves with width.
---
 vtubermini/src/pages/home-page.tsx | 152 ++++++++++++++---------------
 1 file changed, 76 insertions(+), 76 deletions(-)

diff --git a/vtubermini/src/pages/home-page.tsx b/vtubermini/src/pages/home-page.tsx
index 065befa..0e683c1 100644
--- a/vtubermini/src/pages/home-page.tsx
+++ b/vtubermini/src/pages/home-page.tsx
@@ -488,82 +488,6 @@ export function HomePage({
           返回我的保存
         </button>
       ) : null}
-      {activeDialog ? (
-        <div
-          className={`absolute inset-x-[4%] bottom-[15.8%] z-40 ${
-            activeDialog.kind === 'idle'
-              ? 'pointer-events-auto'
-              : 'pointer-events-none'
-          }`}
-          key={`${activeDialog.kind}-${activeDialog.text}`}
-        >
-          {activeDialog.kind === 'idle' ? (
-            <button
-              className="absolute right-[13%] top-0 z-30 border-0 bg-transparent p-0 text-[10px] font-normal leading-none text-white drop-shadow-[0_1px_4px_rgba(8,22,64,0.82)] transition hover:text-white active:scale-[0.98]"
-              onClick={(event) => {
-                event.stopPropagation()
-                setActiveDialog(null)
-              }}
-              type="button"
-            >
-              跳过
-            </button>
-          ) : null}
-          <div
-            className={`relative min-h-[128px] overflow-hidden rounded-[10px] px-7 pb-5 pt-7 text-left [font-family:'Microsoft_YaHei_UI','Microsoft_YaHei',sans-serif] ${
-              activeDialog.kind === 'idle'
-                ? 'animate-[home-idle-dialog-enter_360ms_cubic-bezier(0.2,0.82,0.24,1)]'
-                : 'animate-[home-dialog-float_2500ms_ease-out_both]'
-            }`}
-          >
-            <img
-              alt=""
-              aria-hidden="true"
-              className="pointer-events-none absolute inset-0 z-0 h-full w-full select-none object-fill opacity-75"
-              draggable={false}
-              src={homeDialogBoxImage}
-            />
-            <span
-              className={`z-10 block text-[14px] font-normal leading-[1.75] tracking-[0.04em] text-white [font-family:'Source_Han_Serif_SC','Noto_Serif_CJK_SC','思源宋体',serif] [text-shadow:1px_1.5px_0_rgba(0,0,0,0.72),0_0_1px_rgba(0,0,0,0.38)] ${
-                activeDialog.kind === 'idle'
-                  ? 'relative mt-4 max-w-[82%]'
-                  : 'absolute left-7 top-1/2 w-[80%] -translate-y-1/2'
-              }`}
-            >
-              {activeDialog.text}
-            </span>
-          </div>
-          {activeDialog.kind === 'idle' ? (
-            <div className="mx-auto mt-1.5 flex w-[78%] animate-[home-idle-dialog-enter_360ms_cubic-bezier(0.2,0.82,0.24,1)] flex-col gap-1.5">
-              {activeDialog.choices.map((choice) => (
-                <button
-                  className="group relative min-h-[31px] overflow-hidden rounded-[8px] border-0 bg-transparent px-0 py-0 text-left font-normal text-white shadow-[0_8px_18px_rgba(0,0,0,0.2)] transition active:scale-[0.99] [font-family:'Microsoft_YaHei_UI','Microsoft_YaHei',sans-serif]"
-                  key={choice.label}
-                  onClick={(event) => {
-                    event.stopPropagation()
-                    handleDialogChoice(choice)
-                  }}
-                  type="button"
-                >
-                  <img
-                    alt=""
-                    aria-hidden="true"
-                    className="pointer-events-none absolute inset-0 z-0 h-full w-full select-none object-fill opacity-85 transition group-hover:opacity-85"
-                    draggable={false}
-                    src={homeChoiceBoxImage}
-                  />
-                  <span
-                    className="absolute z-10 flex items-center justify-center overflow-hidden text-center text-[12px] leading-none tracking-[0.04em] drop-shadow-[0_1px_4px_rgba(0,0,0,0.72)] [font-family:'Source_Han_Serif_SC','Noto_Serif_CJK_SC','思源宋体',serif]"
-                    style={homeChoiceTextBoxStyle}
-                  >
-                    <span className="block w-full truncate">{choice.label}</span>
-                  </span>
-                </button>
-              ))}
-            </div>
-          ) : null}
-        </div>
-      ) : null}
       <HomeLayoutBox
         className="z-30"
         elementId="profile"
@@ -711,6 +635,82 @@ export function HomePage({
         })}
       </div>
       </div>
+      {activeDialog ? (
+        <div
+          className={`absolute inset-x-[4%] bottom-[15.8%] z-40 ${
+            activeDialog.kind === 'idle'
+              ? 'pointer-events-auto'
+              : 'pointer-events-none'
+          }`}
+          key={`${activeDialog.kind}-${activeDialog.text}`}
+        >
+          {activeDialog.kind === 'idle' ? (
+            <button
+              className="absolute right-[13%] top-0 z-30 border-0 bg-transparent p-0 text-[10px] font-normal leading-none text-white drop-shadow-[0_1px_4px_rgba(8,22,64,0.82)] transition hover:text-white active:scale-[0.98]"
+              onClick={(event) => {
+                event.stopPropagation()
+                setActiveDialog(null)
+              }}
+              type="button"
+            >
+              跳过
+            </button>
+          ) : null}
+          <div
+            className={`relative min-h-[128px] overflow-hidden rounded-[10px] px-7 pb-5 pt-7 text-left [font-family:'Microsoft_YaHei_UI','Microsoft_YaHei',sans-serif] ${
+              activeDialog.kind === 'idle'
+                ? 'animate-[home-idle-dialog-enter_360ms_cubic-bezier(0.2,0.82,0.24,1)]'
+                : 'animate-[home-dialog-float_2500ms_ease-out_both]'
+            }`}
+          >
+            <img
+              alt=""
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 z-0 h-full w-full select-none object-fill opacity-75"
+              draggable={false}
+              src={homeDialogBoxImage}
+            />
+            <span
+              className={`z-10 block text-[14px] font-normal leading-[1.75] tracking-[0.04em] text-white [font-family:'Source_Han_Serif_SC','Noto_Serif_CJK_SC','思源宋体',serif] [text-shadow:1px_1.5px_0_rgba(0,0,0,0.72),0_0_1px_rgba(0,0,0,0.38)] ${
+                activeDialog.kind === 'idle'
+                  ? 'relative mt-4 max-w-[82%]'
+                  : 'absolute left-7 top-1/2 w-[80%] -translate-y-1/2'
+              }`}
+            >
+              {activeDialog.text}
+            </span>
+          </div>
+          {activeDialog.kind === 'idle' ? (
+            <div className="mx-auto mt-1.5 flex w-[78%] animate-[home-idle-dialog-enter_360ms_cubic-bezier(0.2,0.82,0.24,1)] flex-col gap-1.5">
+              {activeDialog.choices.map((choice) => (
+                <button
+                  className="group relative min-h-[31px] overflow-hidden rounded-[8px] border-0 bg-transparent px-0 py-0 text-left font-normal text-white shadow-[0_8px_18px_rgba(0,0,0,0.2)] transition active:scale-[0.99] [font-family:'Microsoft_YaHei_UI','Microsoft_YaHei',sans-serif]"
+                  key={choice.label}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    handleDialogChoice(choice)
+                  }}
+                  type="button"
+                >
+                  <img
+                    alt=""
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0 z-0 h-full w-full select-none object-fill opacity-85 transition group-hover:opacity-85"
+                    draggable={false}
+                    src={homeChoiceBoxImage}
+                  />
+                  <span
+                    className="absolute z-10 flex items-center justify-center overflow-hidden text-center text-[12px] leading-none tracking-[0.04em] drop-shadow-[0_1px_4px_rgba(0,0,0,0.72)] [font-family:'Source_Han_Serif_SC','Noto_Serif_CJK_SC','思源宋体',serif]"
+                    style={homeChoiceTextBoxStyle}
+                  >
+                    <span className="block w-full truncate">{choice.label}</span>
+                  </span>
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
       <div className="absolute inset-x-0 bottom-0 z-30 overflow-hidden" style={{ aspectRatio: "108 / 25" }}><img src={bottomIconBar} alt="" aria-hidden="true" draggable={false} className="pointer-events-none absolute inset-0 h-full w-full object-fill scale-x-[1.12]" />{[{ route: "shop", icon: shopIcon, left: "8.1%" }, { route: "moments", icon: momentsIcon, left: "33.7%" }, { route: "pet", icon: petIcon, left: "56.6%" }, { route: "album", icon: albumIcon, left: "80%" }].map((t) => (<button key={t.route} type="button" aria-label={t.route} onClick={() => onNavigate(t.route as AppRoute)} style={{ left: t.left, width: "13.3%" }} className="absolute top-1/2 flex -translate-y-1/2 items-center justify-center active:scale-95">{t.route === "moments" ? (<span className="pointer-events-none absolute -top-1 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap rounded-full border border-white/40 bg-[#f4d79b] px-1.5 py-px text-[8px] font-bold leading-tight text-[#5e3717] shadow-[0_2px_6px_rgba(0,0,0,0.3)]">全新系列</span>) : null}<img src={t.icon} alt="" draggable={false} className="w-full select-none object-contain" /></button>))}</div>
     </div>
   )