From ce44113b40ce9256bf65778d49fdea17b8df9e2f Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Thu, 10 Oct 2024 15:05:02 +0700
Subject: [PATCH] fix(timeline): items container collapses height to zero

---
 .../stories/marketing/Timeline.stories.tsx    |  2 +-
 src/ui/timeline/timeline.lite.tsx             | 36 +++++++++++++++++--
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/react/stories/marketing/Timeline.stories.tsx b/packages/react/stories/marketing/Timeline.stories.tsx
index 28d044f1..d2d5a461 100644
--- a/packages/react/stories/marketing/Timeline.stories.tsx
+++ b/packages/react/stories/marketing/Timeline.stories.tsx
@@ -51,7 +51,7 @@ const SecondaryContent = () => {
 export const Default: Story = {
   render() {
     return (
-      <Box height="4000px" paddingBottom="$24">
+      <Box paddingBottom="$24">
         <Timeline
           events={[
             {
diff --git a/src/ui/timeline/timeline.lite.tsx b/src/ui/timeline/timeline.lite.tsx
index 6371921c..6e940f34 100644
--- a/src/ui/timeline/timeline.lite.tsx
+++ b/src/ui/timeline/timeline.lite.tsx
@@ -1,6 +1,7 @@
 import {
   Show,
   For,
+  onUpdate,
   onMount,
   onUnMount,
   useMetadata,
@@ -21,20 +22,47 @@ useMetadata({
 });
 
 export default function Timeline(props: TimelineProps) {
+  const timelineRef = useRef<HTMLDivElement>(null);
+  let cleanupRef = useRef<() => void>(null);
+
   const state = useStore<{
     internalTheme: UIState["theme"];
+    timelineHeight: number;
+    updateTimelineHeight: () => void;
   }>({
     internalTheme: store.getState().theme,
+    timelineHeight: 0,
+    updateTimelineHeight: () => {
+      if (timelineRef) {
+        const height = timelineRef.scrollHeight;
+        state.timelineHeight = height;
+      }
+    },
   });
 
-  let cleanupRef = useRef<() => void>(null);
-
   onMount(() => {
-    cleanupRef = store.subscribe((newState, prevState) => {
+    const handleResize = () => {
+      state.updateTimelineHeight();
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    const cleanupStore = store.subscribe((newState, prevState) => {
       state.internalTheme = newState.theme;
     });
+
+    state.updateTimelineHeight();
+
+    cleanupRef = () => {
+      window.removeEventListener("resize", handleResize);
+      cleanupStore();
+    };
   });
 
+  onUpdate(() => {
+    state.updateTimelineHeight();
+  }, [props.events]);
+
   onUnMount(() => {
     if (typeof cleanupRef === "function") {
       cleanupRef();
@@ -43,6 +71,8 @@ export default function Timeline(props: TimelineProps) {
 
   return (
     <Box
+      boxRef={timelineRef}
+      minHeight={`${state.timelineHeight}px`}
       display="flex"
       flexDirection="column"
       gap="$16"