From 75ee76ef55f73aae4894ccb9e3f9e915cb456d57 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Mon, 30 Sep 2024 16:34:23 -0500
Subject: [PATCH 1/7] Refactor event details link, add link support for
 endpointId.

---
 .../event/event-details-link.svelte           | 50 +++++++++++
 .../event/event-details-row-expanded.svelte   | 52 ++----------
 .../components/event/event-details-row.svelte | 83 ++-----------------
 .../get-single-attribute-for-event.ts         | 29 +++++++
 4 files changed, 89 insertions(+), 125 deletions(-)
 create mode 100644 src/lib/components/event/event-details-link.svelte

diff --git a/src/lib/components/event/event-details-link.svelte b/src/lib/components/event/event-details-link.svelte
new file mode 100644
index 000000000..e4d396a40
--- /dev/null
+++ b/src/lib/components/event/event-details-link.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import Badge from '$lib/holocene/badge.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
+  import { type EventLinkType } from '$lib/utilities/get-single-attribute-for-event';
+  import {
+    routeForEventHistory,
+    routeForNexusEndpoint,
+    routeForTaskQueue,
+  } from '$lib/utilities/route-for';
+
+  export let value: string;
+  export let attributes: CombinedAttributes;
+  export let type: EventLinkType;
+
+  $: ({ workflow, namespace } = $page.params);
+
+  $: hrefs = {
+    execution: routeForEventHistory({
+      namespace,
+      workflow,
+      run: value,
+    }),
+    'task-queue': routeForTaskQueue({ namespace, queue: value }),
+    'child-workflow': routeForEventHistory({
+      namespace,
+      workflow: attributes.workflowExecutionWorkflowId,
+      run: attributes.workflowExecutionRunId,
+    }),
+    'nexus-endpoint': routeForNexusEndpoint(value),
+  };
+
+  $: href = hrefs[type];
+</script>
+
+<Copyable
+  copyIconTitle={translate('common.copy-icon-title')}
+  copySuccessIconTitle={translate('common.copy-success-icon-title')}
+  content={value}
+>
+  <Badge type="subtle" class="select-none">
+    <Link class="truncate break-all" {href}>
+      {value}
+    </Link>
+  </Badge>
+</Copyable>
diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
index c44d277d1..be839a8ac 100644
--- a/src/lib/components/event/event-details-row-expanded.svelte
+++ b/src/lib/components/event/event-details-row-expanded.svelte
@@ -1,27 +1,19 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-
   import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
-  import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import { timeFormat } from '$lib/stores/time-format';
   import { format } from '$lib/utilities/format-camel-case';
   import { formatDate } from '$lib/utilities/format-date';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
   import {
+    displayLinkType,
     getCodeBlockValue,
     getStackTrace,
-    shouldDisplayAsExecutionLink,
-    shouldDisplayAsTaskQueueLink,
     shouldDisplayAsTime,
-    shouldDisplayChildWorkflowLink,
   } from '$lib/utilities/get-single-attribute-for-event';
-  import {
-    routeForEventHistory,
-    routeForTaskQueue,
-  } from '$lib/utilities/route-for';
 
+  import EventDetailsLink from './event-details-link.svelte';
   import PayloadDecoder from './payload-decoder.svelte';
 
   export let key: string;
@@ -29,9 +21,9 @@
   export let attributes: CombinedAttributes;
   export let inline = false;
 
-  const { workflow, namespace } = $page.params;
   $: codeBlockValue = getCodeBlockValue(value);
   $: stackTrace = getStackTrace(codeBlockValue);
+  $: linkType = displayLinkType(key, attributes);
 </script>
 
 <div class="flex {$$props.class}">
@@ -88,44 +80,10 @@
         </div>
       {/if}
     </div>
-  {:else if shouldDisplayAsExecutionLink(key)}
-    <div class="content detail-row">
-      <p class="text-sm">{format(key)}</p>
-      <Badge type="subtle">
-        <Link
-          href={routeForEventHistory({
-            namespace,
-            workflow,
-            run: value.toString(),
-          })}
-        >
-          {value}
-        </Link>
-      </Badge>
-    </div>
-  {:else if shouldDisplayChildWorkflowLink(key, attributes)}
+  {:else if linkType !== 'none'}
     <div class="content detail-row">
       <p class="text-sm">{format(key)}</p>
-      <Badge type="subtle">
-        <Link
-          href={routeForEventHistory({
-            namespace: attributes?.namespace || namespace,
-            workflow: attributes.workflowExecutionWorkflowId,
-            run: attributes.workflowExecutionRunId,
-          })}
-        >
-          {value}
-        </Link>
-      </Badge>
-    </div>
-  {:else if shouldDisplayAsTaskQueueLink(key)}
-    <div class="content detail-row">
-      <p class="text-sm">{format(key)}</p>
-      <Badge type="subtle">
-        <Link href={routeForTaskQueue({ namespace, queue: value.toString() })}>
-          {value}
-        </Link>
-      </Badge>
+      <EventDetailsLink value={String(value)} {attributes} type={linkType} />
     </div>
   {:else}
     <div class="content detail-row">
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
index 70d285172..f617ae316 100644
--- a/src/lib/components/event/event-details-row.svelte
+++ b/src/lib/components/event/event-details-row.svelte
@@ -1,23 +1,11 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-
   import Badge from '$lib/holocene/badge.svelte';
-  import Copyable from '$lib/holocene/copyable/index.svelte';
-  import Link from '$lib/holocene/link.svelte';
-  import { translate } from '$lib/i18n/translate';
   import type { Payloads } from '$lib/types';
   import { format } from '$lib/utilities/format-camel-case';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
-  import {
-    shouldDisplayAsExecutionLink,
-    shouldDisplayAsTaskQueueLink,
-    shouldDisplayChildWorkflowLink,
-  } from '$lib/utilities/get-single-attribute-for-event';
-  import {
-    routeForEventHistory,
-    routeForTaskQueue,
-  } from '$lib/utilities/route-for';
+  import { displayLinkType } from '$lib/utilities/get-single-attribute-for-event';
 
+  import EventDetailsLink from './event-details-link.svelte';
   import PayloadDecoder from './payload-decoder.svelte';
 
   export let key: string;
@@ -25,7 +13,7 @@
   export let attributes: CombinedAttributes;
   export let showKey = true;
 
-  const { workflow, namespace } = $page.params;
+  $: linkType = displayLinkType(key, attributes);
 </script>
 
 {#if key}
@@ -47,71 +35,10 @@
           </div>
         </PayloadDecoder>
       </div>
-    {:else if shouldDisplayAsExecutionLink(key)}
-      <div class="flex w-full items-center gap-2 pr-1">
-        <div class="truncate text-sm">
-          <Copyable
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-            content={value}
-            container-class="xl:flex-row"
-          >
-            <Badge type="subtle" class="select-none">
-              <Link
-                class="truncate"
-                href={routeForEventHistory({
-                  namespace,
-                  workflow,
-                  run: value,
-                })}
-              >
-                {value}
-              </Link>
-            </Badge>
-          </Copyable>
-        </div>
-      </div>
-    {:else if shouldDisplayChildWorkflowLink(key, attributes)}
-      <div class="flex w-full items-center gap-2 pr-1">
-        <div class="truncate text-sm">
-          <Copyable
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-            content={value}
-            container-class="xl:flex-row"
-          >
-            <Badge type="subtle" class="select-none">
-              <Link
-                class="truncate"
-                href={routeForEventHistory({
-                  namespace,
-                  workflow: attributes.workflowExecutionWorkflowId,
-                  run: attributes.workflowExecutionRunId,
-                })}
-              >
-                {value}
-              </Link>
-            </Badge>
-          </Copyable>
-        </div>
-      </div>
-    {:else if shouldDisplayAsTaskQueueLink(key)}
+    {:else if linkType !== 'none'}
       <div class="flex w-full items-center gap-2 pr-1">
         <div class="truncate text-sm">
-          <Copyable
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-            content={value}
-          >
-            <Badge type="subtle" class="select-none">
-              <Link
-                class="truncate"
-                href={routeForTaskQueue({ namespace, queue: value })}
-              >
-                {value}
-              </Link>
-            </Badge>
-          </Copyable>
+          <EventDetailsLink {value} {attributes} type={linkType} />
         </div>
       </div>
     {:else}
diff --git a/src/lib/utilities/get-single-attribute-for-event.ts b/src/lib/utilities/get-single-attribute-for-event.ts
index 758d079d8..ac61ae960 100644
--- a/src/lib/utilities/get-single-attribute-for-event.ts
+++ b/src/lib/utilities/get-single-attribute-for-event.ts
@@ -141,6 +141,24 @@ const keysWithExecutionLinks = [
   'originalExecutionRunId',
 ] as const;
 
+export type EventLinkType =
+  | 'execution'
+  | 'task-queue'
+  | 'child-workflow'
+  | 'nexus-endpoint'
+  | 'none';
+
+export const displayLinkType = (
+  key: string,
+  attributes: CombinedAttributes,
+): EventLinkType => {
+  if (shouldDisplayAsExecutionLink(key)) return 'execution';
+  if (shouldDisplayAsTaskQueueLink(key)) return 'task-queue';
+  if (shouldDisplayChildWorkflowLink(key, attributes)) return 'child-workflow';
+  if (shouldDisplayNexusEndpointLink(key)) return 'nexus-endpoint';
+  return 'none';
+};
+
 // For linking to same workflow but different execution
 export const shouldDisplayAsExecutionLink = (
   key: string,
@@ -185,6 +203,16 @@ export const shouldDisplayChildWorkflowLink = (
   return false;
 };
 
+const keysWithNexusEndpointLinks = ['endpointId'] as const;
+
+export const shouldDisplayNexusEndpointLink = (key: string): boolean => {
+  for (const taskQueueKey of keysWithNexusEndpointLinks) {
+    if (key === taskQueueKey) return true;
+  }
+
+  return false;
+};
+
 export const shouldDisplayAsTime = (key: string): boolean => {
   return key?.toLowerCase()?.endsWith('time');
 };
@@ -225,6 +253,7 @@ const preferredSummaryKeys = [
   'historySizeBytes',
   'identity',
   'parentInitiatedEventId',
+  'endpointId',
 ] as const;
 
 /**

From c1c1ffbe7f211f798e14ad1d7d5fcbc9f6eba701 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Tue, 1 Oct 2024 08:51:22 -0500
Subject: [PATCH 2/7] More refactoring

---
 .../event/event-details-link.svelte           | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/event/event-details-link.svelte b/src/lib/components/event/event-details-link.svelte
index e4d396a40..64216ca17 100644
--- a/src/lib/components/event/event-details-link.svelte
+++ b/src/lib/components/event/event-details-link.svelte
@@ -19,19 +19,24 @@
 
   $: ({ workflow, namespace } = $page.params);
 
-  $: hrefs = {
-    execution: routeForEventHistory({
-      namespace,
-      workflow,
-      run: value,
-    }),
-    'task-queue': routeForTaskQueue({ namespace, queue: value }),
-    'child-workflow': routeForEventHistory({
-      namespace,
-      workflow: attributes.workflowExecutionWorkflowId,
-      run: attributes.workflowExecutionRunId,
-    }),
-    'nexus-endpoint': routeForNexusEndpoint(value),
+  $: executionLink = routeForEventHistory({
+    namespace,
+    workflow,
+    run: value,
+  });
+  $: taskQueueLink = routeForTaskQueue({ namespace, queue: value });
+  $: childWorkflowLink = routeForEventHistory({
+    namespace,
+    workflow: attributes.workflowExecutionWorkflowId,
+    run: attributes.workflowExecutionRunId,
+  });
+  $: nexusEndpointLink = routeForNexusEndpoint(value);
+
+  const hrefs: Record<Exclude<EventLinkType, 'none'>, string> = {
+    execution: executionLink,
+    'task-queue': taskQueueLink,
+    'child-workflow': childWorkflowLink,
+    'nexus-endpoint': nexusEndpointLink,
   };
 
   $: href = hrefs[type];

From a2d01545ad747594a75d70809137a5ed53e59a0a Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Tue, 1 Oct 2024 11:11:19 -0500
Subject: [PATCH 3/7] Make reactive with type

---
 src/lib/components/event/event-details-link.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/event/event-details-link.svelte b/src/lib/components/event/event-details-link.svelte
index 64216ca17..6946398ff 100644
--- a/src/lib/components/event/event-details-link.svelte
+++ b/src/lib/components/event/event-details-link.svelte
@@ -32,12 +32,12 @@
   });
   $: nexusEndpointLink = routeForNexusEndpoint(value);
 
-  const hrefs: Record<Exclude<EventLinkType, 'none'>, string> = {
+  $: hrefs = {
     execution: executionLink,
     'task-queue': taskQueueLink,
     'child-workflow': childWorkflowLink,
     'nexus-endpoint': nexusEndpointLink,
-  };
+  } as Record<Exclude<EventLinkType, 'none'>, string>;
 
   $: href = hrefs[type];
 </script>

From d0a3950be4a2bb2a8346f7e26369868f2d300f53 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Wed, 2 Oct 2024 10:26:03 -0500
Subject: [PATCH 4/7] Refactor to add link to timeline details

---
 .../event/event-details-link.svelte           | 18 ++-----
 .../event/event-details-row-expanded.svelte   | 15 +++++-
 .../components/event/event-details-row.svelte | 12 ++++-
 .../svg/group-details-text.svelte             | 53 ++-----------------
 src/lib/holocene/link.svelte                  |  2 +-
 5 files changed, 35 insertions(+), 65 deletions(-)

diff --git a/src/lib/components/event/event-details-link.svelte b/src/lib/components/event/event-details-link.svelte
index 6946398ff..c8331d1e7 100644
--- a/src/lib/components/event/event-details-link.svelte
+++ b/src/lib/components/event/event-details-link.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
 
-  import Badge from '$lib/holocene/badge.svelte';
-  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
-  import { translate } from '$lib/i18n/translate';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
   import { type EventLinkType } from '$lib/utilities/get-single-attribute-for-event';
   import {
@@ -16,6 +13,7 @@
   export let value: string;
   export let attributes: CombinedAttributes;
   export let type: EventLinkType;
+  export let light = false;
 
   $: ({ workflow, namespace } = $page.params);
 
@@ -42,14 +40,6 @@
   $: href = hrefs[type];
 </script>
 
-<Copyable
-  copyIconTitle={translate('common.copy-icon-title')}
-  copySuccessIconTitle={translate('common.copy-success-icon-title')}
-  content={value}
->
-  <Badge type="subtle" class="select-none">
-    <Link class="truncate break-all" {href}>
-      {value}
-    </Link>
-  </Badge>
-</Copyable>
+<Link class="truncate break-all" {href} {light}>
+  {value}
+</Link>
diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
index be839a8ac..4d6a76281 100644
--- a/src/lib/components/event/event-details-row-expanded.svelte
+++ b/src/lib/components/event/event-details-row-expanded.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import { translate } from '$lib/i18n/translate';
   import { timeFormat } from '$lib/stores/time-format';
   import { format } from '$lib/utilities/format-camel-case';
@@ -83,7 +84,19 @@
   {:else if linkType !== 'none'}
     <div class="content detail-row">
       <p class="text-sm">{format(key)}</p>
-      <EventDetailsLink value={String(value)} {attributes} type={linkType} />
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={String(value)}
+      >
+        <Badge type="subtle" class="select-none">
+          <EventDetailsLink
+            value={String(value)}
+            {attributes}
+            type={linkType}
+          />
+        </Badge>
+      </Copyable>
     </div>
   {:else}
     <div class="content detail-row">
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
index f617ae316..3c08a9265 100644
--- a/src/lib/components/event/event-details-row.svelte
+++ b/src/lib/components/event/event-details-row.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import Badge from '$lib/holocene/badge.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
+  import { translate } from '$lib/i18n/translate';
   import type { Payloads } from '$lib/types';
   import { format } from '$lib/utilities/format-camel-case';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
@@ -38,7 +40,15 @@
     {:else if linkType !== 'none'}
       <div class="flex w-full items-center gap-2 pr-1">
         <div class="truncate text-sm">
-          <EventDetailsLink {value} {attributes} type={linkType} />
+          <Copyable
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+            content={value}
+          >
+            <Badge type="subtle" class="select-none">
+              <EventDetailsLink {value} {attributes} type={linkType} />
+            </Badge>
+          </Copyable>
         </div>
       </div>
     {:else}
diff --git a/src/lib/components/lines-and-dots/svg/group-details-text.svelte b/src/lib/components/lines-and-dots/svg/group-details-text.svelte
index afe82e2cc..56b88e6fe 100644
--- a/src/lib/components/lines-and-dots/svg/group-details-text.svelte
+++ b/src/lib/components/lines-and-dots/svg/group-details-text.svelte
@@ -1,26 +1,15 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-
+  import EventDetailsLink from '$lib/components/event/event-details-link.svelte';
   import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
-  import Link from '$lib/holocene/link.svelte';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
   import {
+    displayLinkType,
     getCodeBlockValue,
-    // getStackTrace,
-    shouldDisplayAsExecutionLink,
-    shouldDisplayAsTaskQueueLink,
-    shouldDisplayChildWorkflowLink,
   } from '$lib/utilities/get-single-attribute-for-event';
-  import {
-    routeForEventHistory,
-    routeForTaskQueue,
-  } from '$lib/utilities/route-for';
 
   import { DetailsConfig, staticCodeBlockHeight } from '../constants';
 
-  const { workflow, namespace } = $page.params;
-
   export let key: string;
   export let value: string | Record<string, unknown>;
   export let attributes: CombinedAttributes;
@@ -31,6 +20,7 @@
 
   $: [x, y] = point;
   $: codeBlockValue = getCodeBlockValue(value);
+  $: linkType = displayLinkType(key, attributes);
 </script>
 
 {#if typeof value === 'object'}
@@ -48,9 +38,6 @@
             maxHeight={staticCodeBlockHeight - fontSizeRatio}
           />
         </foreignObject>
-        <!-- <Text  position="middle" {point} category="pending">
-          {decodedValue.slice(1, -1)}
-        </Text> -->
       {/key}
     </PayloadDecoder>
   {:else if key === 'searchAttributes'}
@@ -71,10 +58,6 @@
             maxHeight={staticCodeBlockHeight - fontSizeRatio}
           />
         </foreignObject>
-
-        <!-- <Text  position="middle" {point} category="pending">
-          {decodedValue}
-        </Text> -->
       {/key}
     </PayloadDecoder>
   {:else}
@@ -91,37 +74,11 @@
             maxHeight={staticCodeBlockHeight - fontSizeRatio}
           />
         </foreignObject>
-        <!-- <Text  position="middle" {point} category="pending"
-          >{decodedValue}</Text
-        > -->
       {/key}
     </PayloadDecoder>
   {/if}
-  <!-- {#if stackTrace}
-    {stackTrace}
-  {/if} -->
-{:else if shouldDisplayAsExecutionLink(key)}
-  <Link
-    light
-    href={routeForEventHistory({
-      namespace,
-      workflow,
-      run: value,
-    })}>{value}</Link
-  >
-{:else if shouldDisplayChildWorkflowLink(key, attributes)}
-  <Link
-    light
-    href={routeForEventHistory({
-      namespace: attributes?.namespace || namespace,
-      workflow: attributes.workflowExecutionWorkflowId,
-      run: attributes.workflowExecutionRunId,
-    })}>{value}</Link
-  >
-{:else if shouldDisplayAsTaskQueueLink(key)}
-  <Link light href={routeForTaskQueue({ namespace, queue: value })}
-    >{value}</Link
-  >
+{:else if linkType !== 'none'}
+  <EventDetailsLink {value} {attributes} type={linkType} light />
 {:else}
   {value}
 {/if}
diff --git a/src/lib/holocene/link.svelte b/src/lib/holocene/link.svelte
index 1b1cd64a0..af83aa8e7 100644
--- a/src/lib/holocene/link.svelte
+++ b/src/lib/holocene/link.svelte
@@ -66,7 +66,7 @@
     }
 
     &.light {
-      @apply text-off-white;
+      @apply text-off-white hover:text-indigo-300;
     }
   }
 

From 8d065e5534e4dba7aafbb8bd41864baa8edd6a95 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Wed, 2 Oct 2024 13:42:24 -0500
Subject: [PATCH 5/7] Update based on feedback. Remove max width constraints

---
 .../components/event/event-details-row.svelte | 26 ++++++++-----------
 .../components/event/event-summary-row.svelte |  4 +--
 src/lib/holocene/link.svelte                  |  2 +-
 3 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
index 3c08a9265..db7b74b03 100644
--- a/src/lib/components/event/event-details-row.svelte
+++ b/src/lib/components/event/event-details-row.svelte
@@ -20,10 +20,10 @@
 
 {#if key}
   <div
-    class="flex max-w-lg flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
+    class="flex flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 {$$props.class}"
   >
     {#if showKey}
-      <p class="max-w-fit whitespace-nowrap text-right text-xs">
+      <p class="whitespace-nowrap text-right text-xs">
         {format(key)}
       </p>
     {/if}
@@ -38,19 +38,15 @@
         </PayloadDecoder>
       </div>
     {:else if linkType !== 'none'}
-      <div class="flex w-full items-center gap-2 pr-1">
-        <div class="truncate text-sm">
-          <Copyable
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-            content={value}
-          >
-            <Badge type="subtle" class="select-none">
-              <EventDetailsLink {value} {attributes} type={linkType} />
-            </Badge>
-          </Copyable>
-        </div>
-      </div>
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={value}
+      >
+        <Badge type="subtle" class="select-none">
+          <EventDetailsLink {value} {attributes} type={linkType} />
+        </Badge>
+      </Copyable>
     {:else}
       <div class="flex w-full items-center gap-2 pr-1">
         <p class="truncate text-right text-sm xl:text-left">
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index 6c47cd80f..fb5f21c24 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -138,9 +138,7 @@
   <td
     class="w-full overflow-hidden text-right text-sm font-normal xl:text-left"
   >
-    <div
-      class="flex w-full max-w-screen-sm items-center gap-2 lg:max-w-screen-md xl:max-w-screen-xl"
-    >
+    <div class="flex w-full items-center gap-2">
       <Icon name={icon} />
       <p
         class="event-name max-w-fit whitespace-nowrap pr-4 text-sm font-semibold md:text-base"
diff --git a/src/lib/holocene/link.svelte b/src/lib/holocene/link.svelte
index af83aa8e7..ba9bae605 100644
--- a/src/lib/holocene/link.svelte
+++ b/src/lib/holocene/link.svelte
@@ -66,7 +66,7 @@
     }
 
     &.light {
-      @apply text-off-white hover:text-indigo-300;
+      @apply text-off-white hover:text-indigo-400;
     }
   }
 

From 2bfdf11eb05963d055fdfd875e4b407df67376fd Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Thu, 3 Oct 2024 09:27:00 -0500
Subject: [PATCH 6/7] Add shrink-0 to icon

---
 src/lib/holocene/icon/icon.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/holocene/icon/icon.svelte b/src/lib/holocene/icon/icon.svelte
index c4e444244..cf792f184 100644
--- a/src/lib/holocene/icon/icon.svelte
+++ b/src/lib/holocene/icon/icon.svelte
@@ -15,7 +15,7 @@
     {width}
     {height}
     {title}
-    class={$$props.class}
+    class="shrink-0 {$$props.class}"
     {...$$restProps}
   />
 {/if}

From 38d7a3770d9232951217ff9d3cdf25f59682fc41 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Thu, 3 Oct 2024 12:26:50 -0500
Subject: [PATCH 7/7] Lots of small styling updates

---
 .../event/event-details-full.svelte           |  8 +-
 .../event/event-details-row-expanded.svelte   |  4 +-
 .../components/event/event-details-row.svelte | 20 ++---
 src/lib/components/event/event-link.svelte    |  2 +-
 .../components/event/event-summary-row.svelte | 77 ++++++++-----------
 .../event/event-summary-table.svelte          |  1 +
 .../event/pending-activity-summary-row.svelte |  1 -
 .../table/paginated-table/index.svelte        |  9 ++-
 .../table/paginated-table/paginated.svelte    |  9 ++-
 9 files changed, 65 insertions(+), 66 deletions(-)

diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
index 68e4a9cb5..f2b27e90b 100644
--- a/src/lib/components/event/event-details-full.svelte
+++ b/src/lib/components/event/event-details-full.svelte
@@ -25,8 +25,12 @@
       {#each group.eventList as groupEvent}
         {@const attributes = formatAttributes(groupEvent)}
         {@const details = Object.entries(attributes)}
-        <div class="w-full border-subtle [&:not(:last-child)]:border-r-2">
-          <div class="flex w-full justify-between bg-subtle px-2 py-1">
+        <div
+          class="w-full border-subtle xl:w-1/3 [&:not(:last-child)]:border-r-2"
+        >
+          <div
+            class="flex w-full flex-wrap justify-between bg-subtle px-2 py-1"
+          >
             <div class="flex gap-2">
               {groupEvent.id}
               {spaceBetweenCapitalLetters(groupEvent.name)}
diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
index 4d6a76281..e24634465 100644
--- a/src/lib/components/event/event-details-row-expanded.svelte
+++ b/src/lib/components/event/event-details-row-expanded.svelte
@@ -101,7 +101,7 @@
   {:else}
     <div class="content detail-row">
       <p class="text-sm">{format(key)}</p>
-      <Badge type="subtle">
+      <Badge type="subtle" class="inline-block whitespace-pre-wrap">
         {shouldDisplayAsTime(key) ? formatDate(value, $timeFormat) : value}
       </Badge>
     </div>
@@ -118,6 +118,6 @@
   }
 
   .detail-row {
-    @apply flex w-full items-center gap-4 py-1 text-left xl:flex;
+    @apply flex w-full items-center gap-2 py-1 text-left;
   }
 </style>
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
index db7b74b03..1c0bccbe7 100644
--- a/src/lib/components/event/event-details-row.svelte
+++ b/src/lib/components/event/event-details-row.svelte
@@ -20,16 +20,16 @@
 
 {#if key}
   <div
-    class="flex flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 {$$props.class}"
+    class="invisible flex w-0 items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 md:visible md:w-auto"
   >
     {#if showKey}
-      <p class="whitespace-nowrap text-right text-xs">
+      <p class="truncate whitespace-nowrap text-right text-xs">
         {format(key)}
       </p>
     {/if}
     {#if typeof value === 'object'}
       <div
-        class="flex w-full items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
+        class="flex max-w-sm items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
       >
         <PayloadDecoder {value} key="payloads" let:decodedValue>
           <div class="payload {$$props.class}">
@@ -43,18 +43,14 @@
         copySuccessIconTitle={translate('common.copy-success-icon-title')}
         content={value}
       >
-        <Badge type="subtle" class="select-none">
+        <p class="select-none truncate">
           <EventDetailsLink {value} {attributes} type={linkType} />
-        </Badge>
+        </p>
       </Copyable>
     {:else}
-      <div class="flex w-full items-center gap-2 pr-1">
-        <p class="truncate text-right text-sm xl:text-left">
-          <Badge type="subtle" class="select-none">
-            {value}
-          </Badge>
-        </p>
-      </div>
+      <Badge type="subtle" class="block min-w-fit select-none truncate">
+        {value}
+      </Badge>
     {/if}
   </div>
 {/if}
diff --git a/src/lib/components/event/event-link.svelte b/src/lib/components/event/event-link.svelte
index a1bb8f7c0..b79ccceed 100644
--- a/src/lib/components/event/event-link.svelte
+++ b/src/lib/components/event/event-link.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div
-  class="flex max-w-lg flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
+  class="flex flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
 >
   <p class="max-w-fit whitespace-nowrap text-right text-xs">Link</p>
   <div class="overflow-hidden truncate pr-1">
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index fb5f21c24..cc082fd51 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -136,55 +136,42 @@
     <td class="w-4" />
   {/if}
   <td
-    class="w-full overflow-hidden text-right text-sm font-normal xl:text-left"
+    class="flex w-full items-center gap-2 overflow-hidden text-right text-sm font-normal xl:text-left"
   >
-    <div class="flex w-full items-center gap-2">
-      <Icon name={icon} />
-      <p
-        class="event-name max-w-fit whitespace-nowrap pr-4 text-sm font-semibold md:text-base"
+    <Icon name={icon} />
+    <p
+      class="event-name max-w-fit whitespace-nowrap text-sm font-semibold md:text-base"
+    >
+      {displayName}
+    </p>
+    {#if pendingAttempt}
+      <div
+        class="flex items-center gap-1 {pendingAttempt > 1 &&
+          'surface-danger rounded px-1 py-0.5'}"
       >
-        {displayName}
-      </p>
-      <div class="flex w-full gap-4 truncate">
-        {#if pendingAttempt}
-          <div
-            class="flex items-center gap-1 {pendingAttempt > 1 &&
-              'surface-danger rounded px-1 py-0.5'}"
-          >
-            <Icon class="mr-1.5 inline" name="retry" />
-            {pendingAttempt}
-            {#if hasPendingActivity}
-              / {hasPendingActivity.maximumAttempts || '∞'}
-            {/if}
-          </div>
-        {/if}
-        {#if currentEvent?.links?.length}
-          <EventLink link={currentEvent.links[0]} />
-        {/if}
-        {#if primaryAttribute?.key}
-          <EventDetailsRow
-            {...primaryAttribute}
-            {attributes}
-            class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
-          />
-        {/if}
-        {#if nonPendingActivityAttempt}
-          <EventDetailsRow
-            key="attempt"
-            value={nonPendingActivityAttempt.toString()}
-            {attributes}
-            class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
-          />
-        {/if}
-        {#if compact && secondaryAttribute?.key}
-          <EventDetailsRow
-            {...secondaryAttribute}
-            {attributes}
-            class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
-          />
+        <Icon class="mr-1.5 inline" name="retry" />
+        {pendingAttempt}
+        {#if hasPendingActivity}
+          / {hasPendingActivity.maximumAttempts || '∞'}
         {/if}
       </div>
-    </div>
+    {/if}
+    {#if currentEvent?.links?.length}
+      <EventLink link={currentEvent.links[0]} />
+    {/if}
+    {#if primaryAttribute?.key}
+      <EventDetailsRow {...primaryAttribute} {attributes} />
+    {/if}
+    {#if nonPendingActivityAttempt}
+      <EventDetailsRow
+        key="attempt"
+        value={nonPendingActivityAttempt.toString()}
+        {attributes}
+      />
+    {/if}
+    {#if compact && secondaryAttribute?.key}
+      <EventDetailsRow {...secondaryAttribute} {attributes} />
+    {/if}
   </td>
   <td>
     {#if isEventGroup(event)}
diff --git a/src/lib/components/event/event-summary-table.svelte b/src/lib/components/event/event-summary-table.svelte
index 1537d10ef..120c87375 100644
--- a/src/lib/components/event/event-summary-table.svelte
+++ b/src/lib/components/event/event-summary-table.svelte
@@ -52,6 +52,7 @@
   let:visibleItems
   variant="split"
   maxHeight="calc(100vh - 200px)"
+  fixed
 >
   {#if !compact}
     <HistoryGraph {groups} history={history(visibleItems)} />
diff --git a/src/lib/components/event/pending-activity-summary-row.svelte b/src/lib/components/event/pending-activity-summary-row.svelte
index fe72a36b3..4a507ba2d 100644
--- a/src/lib/components/event/pending-activity-summary-row.svelte
+++ b/src/lib/components/event/pending-activity-summary-row.svelte
@@ -68,7 +68,6 @@
         value={event.activityType}
         showKey
         attributes={event}
-        class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
       />
     </div></td
   >
diff --git a/src/lib/holocene/table/paginated-table/index.svelte b/src/lib/holocene/table/paginated-table/index.svelte
index 08ffbf968..2581842b7 100644
--- a/src/lib/holocene/table/paginated-table/index.svelte
+++ b/src/lib/holocene/table/paginated-table/index.svelte
@@ -7,6 +7,7 @@
   export let variant: 'primary' | 'split' = 'primary';
   export let updating = false;
   export let maxHeight = '';
+  export let fixed = false;
 
   let tableContainer: HTMLDivElement;
 
@@ -20,7 +21,11 @@
   bind:this={tableContainer}
   style="max-height: {maxHeight || `calc(100vh - ${tableOffset}px)`}"
 >
-  <table class="paginated-table">
+  <table
+    class="paginated-table"
+    class:table-fixed={fixed}
+    class:table-auto={!fixed}
+  >
     <slot name="caption" />
     <thead class="paginated-table-header">
       <slot name="headers" {visibleItems} />
@@ -57,7 +62,7 @@
   }
 
   .paginated-table {
-    @apply w-full table-auto;
+    @apply w-full;
   }
 
   .paginated-table-header {
diff --git a/src/lib/holocene/table/paginated-table/paginated.svelte b/src/lib/holocene/table/paginated-table/paginated.svelte
index 915987075..7ca01fe8c 100644
--- a/src/lib/holocene/table/paginated-table/paginated.svelte
+++ b/src/lib/holocene/table/paginated-table/paginated.svelte
@@ -27,6 +27,7 @@
   export let previousPageButtonLabel: string;
   export let maxHeight = '';
   export let pageSizeOptions: string[] = options;
+  export let fixed = false;
 
   $: url = $page.url;
   $: perPageParam = url.searchParams.get(perPageKey) ?? pageSizeOptions[0];
@@ -87,7 +88,13 @@
   }
 </script>
 
-<PaginatedTable {updating} {variant} {maxHeight} visibleItems={$store.items}>
+<PaginatedTable
+  {updating}
+  {variant}
+  {maxHeight}
+  visibleItems={$store.items}
+  {fixed}
+>
   <slot name="caption" slot="caption" />
   <slot name="headers" slot="headers" visibleItems={$store.items} />
   <slot visibleItems={$store.items} />