From 03f24291d86d57cc4d84b82f31170d48bc54e1f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 2 Mar 2026 23:32:22 +0100
Subject: [PATCH] nicolium: experimental timeline: fix connector positioning
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/nicolium/src/columns/timeline.tsx     | 13 +++++++------
 packages/nicolium/src/styles/new/statuses.scss |  4 ++++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/nicolium/src/columns/timeline.tsx b/packages/nicolium/src/columns/timeline.tsx
index 70bde1d2c..3a8f604d6 100644
--- a/packages/nicolium/src/columns/timeline.tsx
+++ b/packages/nicolium/src/columns/timeline.tsx
@@ -43,9 +43,9 @@ const TimelineStatus: React.FC<ITimelineStatus> = (props): React.JSX.Element =>
     return (
       <div
         className={clsx(
-          'absolute left-10 z-[1] hidden w-0.5 bg-gray-200 black:bg-gray-800 dark:bg-primary-800 rtl:left-auto rtl:right-5',
+          'absolute left-5 z-[1] hidden w-0.5 bg-gray-200 black:bg-gray-800 dark:bg-primary-800 rtl:left-auto rtl:right-5',
           {
-            'top-20 !block h-[calc(100%-42px-8px-1rem)]': isConnectedBottom,
+            'top-[calc(28px+42px)] !block h-[calc(100%-42px-8px-1rem)]': isConnectedBottom,
           },
         )}
       />
@@ -54,16 +54,17 @@ const TimelineStatus: React.FC<ITimelineStatus> = (props): React.JSX.Element =>
 
   return (
     <div
-      className={clsx('relative', {
-        'timeline-status-connected': isConnectedBottom,
+      className={clsx('⁂-timeline-status relative', {
+        '⁂-timeline-status--connected-bottom': isConnectedBottom,
         'border-b border-solid border-gray-200 dark:border-gray-800': !isConnectedBottom,
+        '⁂-timeline-status--connected-top': isConnectedTop,
       })}
     >
       {renderConnector()}
       {statusQuery.isPending ? (
-        <PlaceholderStatus variant='default' />
+        <PlaceholderStatus variant='slim' />
       ) : statusQuery.data ? (
-        <Status status={statusQuery.data!} {...props} />
+        <Status status={statusQuery.data!} variant='slim' {...props} />
       ) : null}
     </div>
   );
diff --git a/packages/nicolium/src/styles/new/statuses.scss b/packages/nicolium/src/styles/new/statuses.scss
index eb0e4fd84..d2f11406f 100644
--- a/packages/nicolium/src/styles/new/statuses.scss
+++ b/packages/nicolium/src/styles/new/statuses.scss
@@ -306,3 +306,7 @@
     transform: rotate(180deg);
   }
 }
+
+.⁂-timeline-status--connected-bottom .status__content-wrapper {
+  padding-left: 54px;
+}