From 8bb2d486f3163e7202a868602204e58d3a73c27c Mon Sep 17 00:00:00 2001
From: JExcellence | Justin <justin.eiletz@outlook.com>
Date: Tue, 14 Apr 2026 14:10:22 +0200
Subject: [PATCH] fix: align Timeline labels with marker dots

Replace marginTop/paddingTop hacks with fillHeight lines and
vertical centering on the content column. Fixes #43.
---
 packages/core/src/components/Timeline.tsx | 153 +++++++++++++---------
 1 file changed, 93 insertions(+), 60 deletions(-)

diff --git a/packages/core/src/components/Timeline.tsx b/packages/core/src/components/Timeline.tsx
index 3bd6b677..81866f33 100644
--- a/packages/core/src/components/Timeline.tsx
+++ b/packages/core/src/components/Timeline.tsx
@@ -34,92 +34,125 @@ const Timeline: React.FC<TimelineProps> = ({
     }
   };
 
+  const dotSize = size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48";
+  const isHorizontal = flex.direction === "row";
+
+  const renderDot = (item: TimelineItem, state: string) => (
+    <Flex
+      center
+      radius="full"
+      solid={state === "active" ? "brand-strong" : state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : undefined}
+      background={state === "default" ? "neutral-weak" : undefined}
+      border={state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : state === "active" ? "brand-strong" : "neutral-strong"}
+      minHeight={dotSize}
+      maxHeight={dotSize}
+      minWidth={dotSize}
+      maxWidth={dotSize}
+    >
+      {item.marker && (
+        <Flex
+          center
+          onSolid={state === "active" ? "brand-strong" : state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : undefined}
+          onBackground={state === "default" ? "neutral-weak" : undefined}
+          textVariant="label-default-m"
+        >
+          {item.marker}
+        </Flex>
+      )}
+    </Flex>
+  );
+
+  const markerWidth = isHorizontal ? undefined : dotSize;
+
   return (
     <Column {...flex}>
       {items.map((item, index) => {
         const state = item.state || "default";
         const nextState = index < items.length - 1 ? (items[index + 1].state || "default") : state;
-        
+
         const currentColor = getStateColor(state);
         const nextColor = getStateColor(nextState);
 
-        const isHorizontal = flex.direction === "row";
         const gradientToNext = isHorizontal
           ? `linear-gradient(to right, ${currentColor}, ${nextColor})`
           : `linear-gradient(to bottom, ${currentColor}, ${nextColor})`;
 
+        if (isHorizontal) {
+          return (
+            <Flex key={index} direction="column" fillWidth>
+              <Column
+                fillWidth
+                horizontal="center"
+                vertical="center"
+                direction="row"
+              >
+                {index !== 0 && (
+                  <Line
+                    background={undefined}
+                    solid={state === "active" ? "brand-strong" : state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : "neutral-strong"}
+                  />
+                )}
+                {renderDot(item, state)}
+                {index !== items.length - 1 && (
+                  <Line background={undefined} style={{ background: gradientToNext }} />
+                )}
+              </Column>
+              <Column
+                fillWidth
+                paddingX="20"
+                paddingTop="12"
+                paddingBottom="24"
+                horizontal={index === 0 ? "start" : index === items.length - 1 ? "end" : "center"}
+                align={index === 0 ? "left" : index === items.length - 1 ? "right" : "center"}
+                gap="2"
+              >
+                {item.label && (
+                  <Text variant="label-default-m" onBackground={state === "danger" ? "danger-weak" : undefined}>{item.label}</Text>
+                )}
+                {item.description && (
+                  <Text variant="body-default-s" onBackground={state === "danger" ? "danger-weak" : "neutral-weak"}>{item.description}</Text>
+                )}
+                {item.children}
+              </Column>
+            </Flex>
+          );
+        }
+
+        const rowDirection = alignment === "right" ? "row-reverse" : undefined;
+        const hasContent = item.description || item.children;
+
         return (
-          <Flex
-            key={index}
-            direction={isHorizontal ? "column" : alignment === "right" ? "row-reverse" : undefined}
-            fillWidth
-          >
-            {/* Marker */}
-            <Column
-              fillWidth
-              horizontal="center" 
-              marginTop={isHorizontal ? undefined : index === 0 ? (size === "xl" ? "8" : size === "l" ? "12" : size === "m" ? "16" : size === "s" ? "20" : "16") : undefined}
-              vertical={isHorizontal ? "center" : undefined}
-              direction={isHorizontal ? "row" : "column"}
-              minWidth={!isHorizontal ? (size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48") : undefined}
-              maxWidth={!isHorizontal ? (size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48") : undefined}>
+          <Flex key={index} fillWidth direction={rowDirection}>
+            <Column horizontal="center" minWidth={markerWidth} maxWidth={markerWidth}>
               {index !== 0 && (
                 <Line
-                  vert={!isHorizontal}
+                  vert
+                  fillHeight
                   background={undefined}
                   solid={state === "active" ? "brand-strong" : state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : "neutral-strong"}
-                  minHeight={flex.direction === "row" ? undefined : "8"}
-                  maxHeight={flex.direction === "row" ? undefined : "8"}
+                  minHeight="8"
                 />
               )}
-                <Flex
-                  fillWidth
-                  center radius="full"
-                  solid={state === "active" ? "brand-strong" : state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : undefined}
-                  background={state === "default" ? "neutral-weak" : undefined}
-                  border={state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : state === "active" ? "brand-strong" : "neutral-strong"}
-                  minHeight={size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48"}
-                  maxHeight={size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48"}
-                  minWidth={size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48"}
-                  maxWidth={size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48"}>
-                  {item.marker && (
-                    <Flex
-                      center
-                      onSolid={state === "active" ? "brand-strong" : state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : undefined}
-                      onBackground={state === "default" ? "neutral-weak" : undefined}
-                      textVariant="label-default-m">
-                      {item.marker}
-                    </Flex>
-                  )}
-                </Flex>
+              {renderDot(item, state)}
               {index !== items.length - 1 && (
-                <Line
-                  vert={!isHorizontal}
-                  background={undefined}
-                  style={{ background: gradientToNext }}
-                />
+                <Line vert fillHeight background={undefined} style={{ background: gradientToNext }} minHeight="8" />
               )}
             </Column>
-
-            {/* Content */}
             <Column
               fillWidth
-              paddingX="20" paddingTop="12" paddingBottom="24"
-              horizontal={isHorizontal && index === 0 ? "start" : isHorizontal && index === items.length - 1 ? "end" : isHorizontal ? "center" : undefined}
-              align={isHorizontal && index === 0 ? "left" : isHorizontal && index === items.length - 1 ? "right" : isHorizontal ? "center" : alignment === "right" ? "right" : undefined}
+              paddingX="20"
+              paddingBottom={index !== items.length - 1 ? "24" : undefined}
+              vertical="center"
               gap="2"
+              align={alignment === "right" ? "right" : undefined}
             >
-                <>
-                  {item.label && (
-                    <Text variant="label-default-m" onBackground={state === "danger" ? "danger-weak" : undefined}>{item.label}</Text>
-                  )}
-                  {item.description && (
-                    <Text variant="body-default-s" onBackground={state === "danger" ? "danger-weak" : "neutral-weak"}>
-                      {item.description}
-                    </Text>
-                  )}
-                  {item.children}
-                </>
+              {item.label && (
+                <Text variant="label-default-m" onBackground={state === "danger" ? "danger-weak" : undefined}>{item.label}</Text>
+              )}
+              {item.description && (
+                <Text variant="body-default-s" onBackground={state === "danger" ? "danger-weak" : "neutral-weak"}>{item.description}</Text>
+              )}
+              {item.children}
             </Column>
           </Flex>
         );