Fix multiline timeline summaries (#3944)

Author: tegan-temporal

src/lib/components/event/event-card.svelte

@@ -258,6 +258,7 @@
           content={decodedValue}
           fill={false}
           compact
+          singleLine
           minHeight={0}
           overrideTheme="primary"
           title={translate('workflows.summary')}

src/lib/components/event/event-summary-row.svelte

@@ -370,6 +370,7 @@
                 fill={false}
                 fitContent
                 compact
+                singleLine
                 minHeight={0}
                 overrideTheme="primary"
                 title={translate('workflows.summary')}

src/lib/components/lines-and-dots/timeline-graph/timeline-graph-row.svelte

@@ -197,6 +197,7 @@
       fill={false}
       fitContent
       compact
+      singleLine
       minHeight={0}
       overrideTheme="primary"
       title={translate('workflows.summary')}

src/lib/holocene/markdown-editor/preview.svelte

@@ -7,6 +7,8 @@
 
   import { useDarkMode } from '$lib/utilities/dark-mode';
 
+  import { normalizePreviewContent } from './preview';
+
   interface Props {
     content: string;
     class?: ClassNameValue;
@@ -30,6 +32,8 @@
      * or two rather than a document.
      */
     compact?: boolean;
+    /** Normalize line breaks so Markdown renders on a single line. */
+    singleLine?: boolean;
     /**
      * Accessible name for the frame. Name what the content is, so a frame in
      * a list of them is distinguishable.
@@ -47,6 +51,7 @@
     minHeight = 100,
     previewTheme,
     compact = false,
+    singleLine = false,
     title = 'output',
   }: Props = $props();
 
@@ -162,7 +167,10 @@
     return content;
   };
 
-  const templatedContent = $derived(replaceTemplate(content));
+  const normalizedContent = $derived(
+    normalizePreviewContent(content, singleLine),
+  );
+  const templatedContent = $derived(replaceTemplate(normalizedContent));
   const resolvedPreviewTheme = $derived(
     previewTheme ?? ($useDarkMode ? 'dark' : 'light'),
   );

src/lib/holocene/markdown-editor/preview.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import { normalizePreviewContent } from './preview';
+
+describe('normalizePreviewContent', () => {
+  it('preserves line breaks by default', () => {
+    const content = 'First line  \nSecond line';
+
+    expect(normalizePreviewContent(content, false)).toBe(content);
+  });
+
+  it('removes line breaks in single-line mode', () => {
+    expect(normalizePreviewContent('First line  \nSecond line', true)).toBe(
+      'First line Second line',
+    );
+  });
+
+  it('preserves inline Markdown in single-line mode', () => {
+    const content = '[Link](https://temporal.io) and **bold text**';
+
+    expect(normalizePreviewContent(content, true)).toBe(content);
+  });
+});

src/lib/holocene/markdown-editor/preview.ts

@@ -0,0 +1,5 @@
+export const normalizePreviewContent = (
+  content: string,
+  singleLine: boolean,
+): string =>
+  singleLine ? content.replace(/[ \t]*(?:\r\n?|\n)+[ \t]*/g, ' ') : content;