Fix tree lines, column alignment, and tooltips in the Relationships tab

src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte

@@ -39,24 +39,31 @@
   const showExpandIcon = $derived(
     !isRootWorkflow && $showFullTree && childrenCount,
   );
+
+  const Glyph = $derived(expanded ? IconHyphen : IconAdd);
 </script>
 
 <div
   class="flex w-full items-center justify-between gap-2 p-1 text-left text-sm lg:gap-4"
 >
-  <div class="flex w-full flex-col gap-2 lg:flex-row lg:items-center lg:gap-4">
-    <div class="flex items-center gap-2 lg:basis-96">
+  <div
+    class="flex w-full flex-col gap-2 lg:min-w-0 lg:flex-row lg:items-start lg:gap-4"
+  >
+    <div class="flex items-center gap-2 lg:min-w-0 lg:flex-1">
       <div class="w-32 leading-4">
         <WorkflowStatusBadge status={workflow.status} />
       </div>
-      <div class="w-full leading-4">
+      <div class="w-full min-w-0 break-words leading-4">
         {#if isRootWorkflow}
           <p class="text-xs">{translate('common.type')}</p>
         {/if}
         <p>{workflow.name}</p>
       </div>
     </div>
-    <div class="leading-4 lg:basis-[800px]">
+    <div
+      data-testid="relationship-id"
+      class="min-w-0 break-words leading-4 lg:w-[18cqw] lg:shrink-0"
+    >
       {#if isRootWorkflow}
         <p class="text-xs">{translate('common.id')}</p>
       {/if}
@@ -72,7 +79,7 @@
       </Link>
     </div>
     {#if $showFullTree}
-      <div class="text-left leading-4 lg:basis-[140px] lg:text-right">
+      <div class="text-left leading-4 lg:w-20 lg:shrink-0 lg:text-right">
         {#if isRootWorkflow}
           <p class="text-xs">{translate('common.child-count')}</p>
         {/if}
@@ -81,7 +88,10 @@
         </div>
       </div>
     {/if}
-    <div class="hidden items-center gap-4 lg:flex lg:basis-5/12">
+    <div
+      data-testid="relationship-timestamps"
+      class="hidden items-start gap-4 lg:grid lg:w-[28cqw] lg:shrink-0 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_8rem] xl:w-[42cqw]"
+    >
       <div class="leading-4">
         {#if isRootWorkflow}
           <p class="text-xs">{translate('common.start')}</p>
@@ -102,8 +112,5 @@
       </div>
     </div>
   </div>
-  {#if showExpandIcon}
-    {@const Glyph = expanded ? IconHyphen : IconAdd}
-    <Glyph class="shrink-0" />
-  {/if}
+  <Glyph class={showExpandIcon ? 'shrink-0' : 'invisible shrink-0'} />
 </div>

src/lib/components/workflow/relationships/workflow-family-node-description-tree.svelte

@@ -23,9 +23,10 @@
   }: Props = $props();
 </script>
 
-{#each root?.children as child}
+{#each root?.children as child, index}
   <WorkflowFamilyNodeDescription
     root={child}
+    lastChild={index === root.children.length - 1}
     {expandAll}
     {onNodeClick}
     {activeWorkflow}

src/lib/components/workflow/relationships/workflow-family-node-description.svelte

@@ -11,6 +11,7 @@
     root: RootNode;
     expandAll: boolean;
     generation?: number;
+    lastChild?: boolean;
     onNodeClick: (node: RootNode, generation: number) => void;
     activeWorkflow?: WorkflowExecution | undefined;
     openRuns: Map<number, string>;
@@ -20,6 +21,7 @@
     root,
     expandAll,
     generation = 0,
+    lastChild = false,
     onNodeClick,
     activeWorkflow = undefined,
     openRuns,
@@ -44,22 +46,23 @@
   };
 </script>
 
-<div class="w-full">
+<div class="relative w-full">
   <button
-    class="relative flex w-full select-text border-primary {isActive &&
+    class="relative flex w-full select-text {isActive &&
       'bg-interactive-primary text-white hover:bg-interactive-primary-hover focus-visible:bg-interactive-primary-hover active:bg-interactive-primary-press'} {isCurrent &&
       !isActive &&
       'bg-surface-tertiary text-primary'} items-center gap-1 px-2 py-1 lg:py-2 {!isActive &&
       'hover:bg-interactive-tertiary-hover'}"
-    class:border-l={!isRootWorkflow && !isActive}
     onclick={(e) => {
       e.stopPropagation();
       onClick();
     }}
   >
-    {#if !isRootWorkflow && !isActive}
+    {#if !isRootWorkflow}
       <div
-        class="absolute left-0 top-[25%] h-[1px] w-3 bg-border-primary lg:top-[50%] lg:w-6"
+        class="absolute left-0 top-0 h-[25%] w-2 border-b border-secondary lg:h-1/2"
+        class:border-l={lastChild}
+        class:rounded-bl={lastChild}
       ></div>
     {/if}
     <div class="flex w-full items-center gap-3 pr-2 text-sm">
@@ -87,4 +90,7 @@
       {/if}
     </div>
   {/if}
+  {#if !isRootWorkflow && !lastChild}
+    <div class="absolute inset-y-0 left-0 border-l border-secondary"></div>
+  {/if}
 </div>

src/lib/components/workflow/relationships/workflow-family-tree.svelte

@@ -58,9 +58,11 @@
   };
 </script>
 
-<div class="flex flex-col bg-surface-primary">
+<div
+  class="relationship-family-shell flex flex-col rounded-lg border border-primary bg-surface-primary"
+>
   <div
-    class="relative z-10 w-full overflow-hidden border-b border-primary bg-surface-primary lg:sticky lg:top-[var(--top-nav-height)]"
+    class="relative z-10 w-full overflow-hidden rounded-t-lg border-b border-primary bg-surface-primary lg:sticky lg:top-[var(--top-nav-height)]"
   >
     <ZoomSvg
       initialZoom={2}
@@ -96,7 +98,7 @@
     </ZoomSvg>
   </div>
   <div
-    class="flex h-auto w-full flex-col overflow-auto bg-surface-secondary text-base text-primary"
+    class="relationship-family-list flex h-auto w-full flex-col overflow-auto rounded-b-lg bg-surface-secondary text-base text-primary"
   >
     <WorkflowFamilyNodeDescription
       {root}
@@ -107,3 +109,15 @@
     />
   </div>
 </div>
+
+<style lang="postcss">
+  .relationship-family-list {
+    container-type: inline-size;
+  }
+
+  @supports (overflow: clip) {
+    .relationship-family-shell {
+      overflow: clip;
+    }
+  }
+</style>

src/lib/holocene/zoom-svg.svelte

@@ -196,7 +196,7 @@
   </div>
   <div class="absolute bottom-4 right-4 z-20 flex items-center gap-2">
     {#if pannable}
-      <Tooltip text="Pan up" bottom>
+      <Tooltip text="Pan up" top>
         <Button
           variant="secondary"
           size="sm"
@@ -205,7 +205,7 @@
           onclick={() => panBy(0, -PAN_STEP_RATIO)}
         />
       </Tooltip>
-      <Tooltip text="Pan down" bottom>
+      <Tooltip text="Pan down" top>
         <Button
           variant="secondary"
           size="sm"
@@ -214,7 +214,7 @@
           onclick={() => panBy(0, PAN_STEP_RATIO)}
         />
       </Tooltip>
-      <Tooltip text="Pan left" bottom>
+      <Tooltip text="Pan left" top>
         <Button
           variant="secondary"
           size="sm"
@@ -223,7 +223,7 @@
           onclick={() => panBy(-PAN_STEP_RATIO, 0)}
         />
       </Tooltip>
-      <Tooltip text="Pan right" bottom>
+      <Tooltip text="Pan right" top>
         <Button
           variant="secondary"
           size="sm"
@@ -234,7 +234,7 @@
       </Tooltip>
     {/if}
     {#if zoomable}
-      <Tooltip text="Zoom in" bottom>
+      <Tooltip text="Zoom in" top>
         <Button
           variant="secondary"
           size="sm"
@@ -244,7 +244,7 @@
           onclick={() => zoomBy(-ZOOM_STEP)}
         />
       </Tooltip>
-      <Tooltip text="Zoom out" bottom>
+      <Tooltip text="Zoom out" top>
         <Button
           variant="secondary"
           size="sm"
@@ -255,7 +255,7 @@
         />
       </Tooltip>
     {/if}
-    <Tooltip text="Center" bottom>
+    <Tooltip text="Center" top>
       <Button
         class="cursor-pointer"
         variant="secondary"