diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
index f95f393728..91f4d5a0b9 100644
--- a/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
+++ b/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>
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description-tree.svelte
index 66e66b5328..3756b510b5 100644
--- a/src/lib/components/workflow/relationships/workflow-family-node-description-tree.svelte
+++ b/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}
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
index c69985003a..3ede0a3524 100644
--- a/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
+++ b/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>
diff --git a/src/lib/components/workflow/relationships/workflow-family-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-tree.svelte
index bc6f635ac0..aed3146b2e 100644
--- a/src/lib/components/workflow/relationships/workflow-family-tree.svelte
+++ b/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>
diff --git a/src/lib/holocene/zoom-svg.svelte b/src/lib/holocene/zoom-svg.svelte
index 46cf3e2da9..224d702983 100644
--- a/src/lib/holocene/zoom-svg.svelte
+++ b/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"
diff --git a/tests/integration/workflow-relationships.desktop.spec.ts b/tests/integration/workflow-relationships.desktop.spec.ts
new file mode 100644
index 0000000000..b1e45054c4
--- /dev/null
+++ b/tests/integration/workflow-relationships.desktop.spec.ts
@@ -0,0 +1,247 @@
+import { expect, type Page, test } from '@playwright/test';
+
+import type { WorkflowExecutionAPIResponse } from '$src/lib/types/workflows';
+import { mockWorkflowApis } from '~/test-utilities/mock-apis';
+import { mockWorkflow } from '~/test-utilities/mocks/workflow';
+import { WORKFLOWS_API } from '~/test-utilities/mocks/workflows';
+import { WORKFLOWS_COUNT_API } from '~/test-utilities/mocks/workflows-count';
+
+const rootId = 'relationships-root';
+const rootRunId = 'relationships-root-run';
+const childAId =
+  'relationshipschildawithanunbreakableworkflowid01234567890123456789';
+const childARunId = 'relationships-child-a-run';
+const grandchildId = 'relationships-grandchild-a1';
+const grandchildRunId = 'relationships-grandchild-a1-run';
+const childBId = 'relationships-child-b';
+const childBRunId = 'relationships-child-b-run';
+const childAName =
+  'Child A with a workflow type name that wraps without shifting columns';
+const grandchildName = 'Grandchild A1';
+const childBName = 'Child B';
+
+const relationshipWorkflow = ({
+  workflowId,
+  runId,
+  name,
+  parent,
+}: {
+  workflowId: string;
+  runId: string;
+  name: string;
+  parent: { workflowId: string; runId: string } | null;
+}) => ({
+  ...mockWorkflow.workflowExecutionInfo,
+  execution: { workflowId, runId },
+  type: { name },
+  startTime: '2022-04-28T05:50:48.264756929Z',
+  closeTime: '2022-04-28T08:50:48.264756929Z',
+  parentExecution: parent,
+  rootExecution: { workflowId: rootId, runId: rootRunId },
+});
+
+const rootWorkflow = {
+  ...mockWorkflow,
+  workflowExecutionInfo: relationshipWorkflow({
+    workflowId: rootId,
+    runId: rootRunId,
+    name: 'Root workflow',
+    parent: null,
+  }),
+} satisfies WorkflowExecutionAPIResponse;
+
+const relationshipWorkflows = [
+  relationshipWorkflow({
+    workflowId: childAId,
+    runId: childARunId,
+    name: childAName,
+    parent: { workflowId: rootId, runId: rootRunId },
+  }),
+  relationshipWorkflow({
+    workflowId: grandchildId,
+    runId: grandchildRunId,
+    name: grandchildName,
+    parent: { workflowId: childAId, runId: childARunId },
+  }),
+  relationshipWorkflow({
+    workflowId: childBId,
+    runId: childBRunId,
+    name: childBName,
+    parent: { workflowId: rootId, runId: rootRunId },
+  }),
+];
+
+const relationshipsUrl = `/namespaces/default/workflows/${rootId}/${rootRunId}/relationships`;
+
+const expectAlignedColumns = async (page: Page) => {
+  const ids = [rootId, childAId, grandchildId, childBId];
+  const idPositions = await Promise.all(
+    ids.map(async (id) => {
+      const box = await page.getByRole('link', { name: id }).boundingBox();
+      return box?.x;
+    }),
+  );
+  const timestampPositions = await page
+    .getByTestId('relationship-timestamps')
+    .evaluateAll((elements) => {
+      return elements.map((element) => element.getBoundingClientRect().x);
+    });
+  const positions = idPositions.filter(
+    (position): position is number => typeof position === 'number',
+  );
+
+  expect(positions).toHaveLength(ids.length);
+  expect(Math.max(...positions) - Math.min(...positions)).toBeLessThan(1);
+  expect(timestampPositions).toHaveLength(ids.length);
+  expect(
+    Math.max(...timestampPositions) - Math.min(...timestampPositions),
+  ).toBeLessThan(1);
+};
+
+test.describe('Relationships nested tree', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockWorkflowApis(page, rootWorkflow);
+    await page.route(WORKFLOWS_COUNT_API, (route) => {
+      return route.fulfill({ json: { count: '4' } });
+    });
+    await page.route(WORKFLOWS_API, (route) => {
+      const url = new URL(route.request().url());
+      if (url.pathname.endsWith('/workflows')) {
+        return route.fulfill({
+          json: { executions: relationshipWorkflows, nextPageToken: null },
+        });
+      }
+      return route.fallback();
+    });
+    await page.goto(relationshipsUrl);
+  });
+
+  test('keeps nested rows aligned and their tree affordances visible', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1100, height: 900 });
+    await expect(page.locator('body')).toHaveAttribute('data-theme', 'light');
+    await expect(page.getByText(childBName)).toBeVisible();
+
+    const expandAll = page.getByRole('switch', { name: 'Expand All' });
+    await expect(expandAll).not.toBeChecked();
+    await expect(page.getByText(grandchildName)).toBeHidden();
+    await expandAll.focus();
+    await page.keyboard.press('Space');
+    await expect(expandAll).toBeChecked();
+    await expect(page.getByText(grandchildName)).toBeVisible();
+    await page.keyboard.press('Space');
+    await expect(expandAll).not.toBeChecked();
+    await expect(page.getByText(grandchildName)).toBeHidden();
+
+    const childARow = page
+      .getByText(childAName)
+      .locator('xpath=ancestor::button');
+    await childARow.click();
+    await expect(childARow).toHaveClass(/bg-interactive-primary/);
+    await expect(page.getByText(grandchildName)).toBeVisible();
+
+    const childAContainer = childARow.locator('..');
+    await expect(childAContainer.locator(':scope > div').last()).toBeVisible();
+    await expect(childARow.locator(':scope > div').first()).not.toHaveClass(
+      /border-l|rounded-bl/,
+    );
+
+    const grandchildRow = page
+      .getByText(grandchildName)
+      .locator('xpath=ancestor::button');
+    await expect(grandchildRow.locator(':scope > div').first()).toHaveClass(
+      /rounded-bl/,
+    );
+
+    const childBRow = page
+      .getByText(childBName)
+      .locator('xpath=ancestor::button');
+    await expect(childBRow.locator(':scope > div').first()).toHaveClass(
+      /border-l/,
+    );
+    await expect(childBRow.locator(':scope > div').first()).toHaveClass(
+      /rounded-bl/,
+    );
+
+    const [childIdBox, childCountBox] = await Promise.all([
+      childARow.getByRole('link', { name: childAId }).boundingBox(),
+      childARow
+        .getByTestId('relationship-id')
+        .locator('xpath=following-sibling::div[1]')
+        .boundingBox(),
+    ]);
+    expect(childIdBox).not.toBeNull();
+    expect(childCountBox).not.toBeNull();
+    expect(childIdBox!.x + childIdBox!.width).toBeLessThanOrEqual(
+      childCountBox!.x,
+    );
+    await expectAlignedColumns(page);
+
+    const zoomIn = page.getByRole('button', { name: 'Zoom in' });
+    const graphHeader = zoomIn.locator(
+      'xpath=ancestor::div[contains(@class, "lg:sticky")]',
+    );
+    await expect(graphHeader).toHaveCSS('position', 'sticky');
+
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await expect(page.getByText(grandchildName)).toBeVisible();
+    await expectAlignedColumns(page);
+
+    await zoomIn.focus();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Shift+Tab');
+    const tooltip = page.getByRole('tooltip', { name: 'Zoom in' });
+    await expect(tooltip).toBeVisible();
+    const [tooltipBox, zoomInBox] = await Promise.all([
+      tooltip.boundingBox(),
+      zoomIn.boundingBox(),
+    ]);
+    expect(tooltipBox).not.toBeNull();
+    expect(zoomInBox).not.toBeNull();
+    expect(tooltipBox!.y + tooltipBox!.height).toBeLessThanOrEqual(
+      zoomInBox!.y,
+    );
+  });
+
+  test.describe('dark mode', () => {
+    test.use({ colorScheme: 'dark' });
+
+    test('uses dark relationship tree tokens', async ({ page }) => {
+      await page.setViewportSize({ width: 1440, height: 900 });
+      await expect(page.locator('body')).toHaveAttribute('data-theme', 'dark');
+      await expect(
+        page.locator('html:has(body[data-theme="dark"])'),
+      ).toHaveCount(1);
+
+      const childARow = page
+        .getByText(childAName)
+        .locator('xpath=ancestor::button');
+      await childARow.click();
+      const activeTreeLine = childARow.locator(':scope > div').first();
+      const darkBorderToken = await activeTreeLine.evaluate((line) =>
+        getComputedStyle(line)
+          .getPropertyValue('--color-border-secondary')
+          .trim(),
+      );
+      await expectAlignedColumns(page);
+
+      await page.emulateMedia({ colorScheme: 'light' });
+      await page.reload();
+      await expect(page.locator('body')).toHaveAttribute('data-theme', 'light');
+      const lightChildARow = page
+        .getByText(childAName)
+        .locator('xpath=ancestor::button');
+      await lightChildARow.click();
+      const lightBorderToken = await lightChildARow
+        .locator(':scope > div')
+        .first()
+        .evaluate((line) =>
+          getComputedStyle(line)
+            .getPropertyValue('--color-border-secondary')
+            .trim(),
+        );
+      expect(darkBorderToken).not.toBe(lightBorderToken);
+    });
+  });
+});