From b19d0bbf36a2adce4581466df96a6863f2840841 Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Tue, 29 Sep 2026 20:24:50 +0800
Subject: [PATCH] fix(chart): waiting copy sits over the empty chart so the
 reveal keeps its height (BUG-1101)

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01N4f2nya58RoRu4yEmJgRGE
---
 frontend/src/app/globals.css                           | 10 ++++++++++
 .../src/components/chart-page/chart-page-skeleton.tsx  |  4 +++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index bef58a58..5aef5d87 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -5264,6 +5264,16 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
   width: max-content;
 }
 .chart-symbol-bubble.is-below { transform: translate(-50%, 8px); }
+/* Waiting copy sits over the breathing empty chart, centred, so the waiting
+   stage and the finished one are the same height. */
+.chart-page-waiting-plot { position: relative; }
+.chart-page-note.chart-page-skeleton-copy {
+  position: absolute;
+  inset: 50% var(--space-4) auto;
+  margin: 0;
+  transform: translateY(-50%);
+  text-align: center;
+}
 .chart-page-symbol-hit { fill: transparent; stroke: none; }
 .chart-page-symbol-target { cursor: help; }
 .chart-page-symbol-target:focus-visible {
diff --git a/frontend/src/components/chart-page/chart-page-skeleton.tsx b/frontend/src/components/chart-page/chart-page-skeleton.tsx
index cc8b2950..6eeafc5a 100644
--- a/frontend/src/components/chart-page/chart-page-skeleton.tsx
+++ b/frontend/src/components/chart-page/chart-page-skeleton.tsx
@@ -10,7 +10,9 @@ export function ChartPageSkeleton({ copy, western = false }: { copy: string; wes
           {western ? <WesternWheelSvg western={EMPTY_WESTERN_WHEEL} skeleton />
             : <VedicChartSvg chart={EMPTY_NORTH_INDIAN_CHART} ariaLabel={copy} skeleton />}
         </div>
-        <p className="chart-page-note chart-page-symbol-note">{copy}</p>
+        {/* Over the empty drawing, not under it: the finished chart has no line
+            below it any more (BUG-1101), so a line here would make it jump. */}
+        <p className="chart-page-note chart-page-skeleton-copy">{copy}</p>
       </div>
     </div>
   );