From 9bc2d718b62a28e7b3752a9e7a461aac8ae363a2 Mon Sep 17 00:00:00 2001
From: Lulu <anlulu.dev@yahoo.com>
Date: Mon, 13 Apr 2026 14:33:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(stage-ui):=20fit=20scroll=20visualizer=20me?=
 =?UTF-8?q?trics=20and=20scroller=20in=20fixed=20he=E2=80=A6=20(#1632)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by-agent: Cursor <unknown@example.com>
---
 .../chat/composables/use-element-scroll-visualize.vue         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/stage-ui/src/components/scenarios/chat/composables/use-element-scroll-visualize.vue b/packages/stage-ui/src/components/scenarios/chat/composables/use-element-scroll-visualize.vue
index fad56c622..6564dc584 100644
--- a/packages/stage-ui/src/components/scenarios/chat/composables/use-element-scroll-visualize.vue
+++ b/packages/stage-ui/src/components/scenarios/chat/composables/use-element-scroll-visualize.vue
@@ -45,7 +45,7 @@ const floatingTop = computed(() => {
 </script>
 
 <template>
-  <div class="h-[30rem] w-full border border-neutral-200/70 rounded-2xl bg-white/70 p-4 dark:border-neutral-800 dark:bg-neutral-950/70">
+  <div class="h-[30rem] w-full flex flex-col border border-neutral-200/70 rounded-2xl bg-white/70 p-4 dark:border-neutral-800 dark:bg-neutral-950/70">
     <div class="grid grid-cols-2 mb-3 gap-2 text-xs text-neutral-500 md:grid-cols-4 dark:text-neutral-400">
       <div>scrollOffset: {{ scrollOffset }}</div>
       <div>viewportHeight: {{ viewportHeight }}</div>
@@ -59,7 +59,7 @@ const floatingTop = computed(() => {
 
     <div
       ref="scrollerRef"
-      class="relative h-[24rem] overflow-y-auto border border-primary-200/70 rounded-xl bg-primary-50/50 p-6 dark:border-primary-900/70 dark:bg-primary-950/20"
+      class="relative min-h-0 flex-1 overflow-y-auto border border-primary-200/70 rounded-xl bg-primary-50/50 p-6 dark:border-primary-900/70 dark:bg-primary-950/20"
     >
       <div class="h-32 border border-neutral-300/70 rounded-xl border-dashed bg-white/70 p-4 text-sm text-neutral-500 dark:border-neutral-700 dark:bg-neutral-900/50 dark:text-neutral-400">
         Scroll down until the top sentinel leaves the viewport, then the marker should stay in the visible middle.