From f4425b34420d48341b505a7522516d40e5b2c584 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 11 Dec 2024 10:09:27 -0700
Subject: [PATCH] Fix overlap of copy button on CodeBlock component (#2470)

* Add margin if copyable button is visible

* Fix text color in current details
---
 src/lib/holocene/code-block.svelte     | 4 ++--
 src/lib/layouts/workflow-header.svelte | 2 +-
 src/lib/vendor/codemirror/theme.ts     | 9 ++++++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
index 27a6971f4..2a13c10b9 100644
--- a/src/lib/holocene/code-block.svelte
+++ b/src/lib/holocene/code-block.svelte
@@ -110,7 +110,7 @@
   ): EditorState => {
     const extensions = [
       keymap.of([...standardKeymap, ...historyKeymap]),
-      TEMPORAL_THEME(isDark),
+      TEMPORAL_THEME({ isDark, copyable }),
       syntaxHighlighting(TEMPORAL_SYNTAX, { fallback: true }),
       indentUnit.of('  '),
       closeBrackets(),
@@ -202,7 +202,7 @@
     <CopyButton
       {copyIconTitle}
       {copySuccessIconTitle}
-      class="absolute right-3 top-1 text-secondary"
+      class="absolute right-1 top-1 text-secondary"
       on:click={handleCopy}
       copied={$copied}
     />
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index 03d853ad7..748b3fdf8 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -149,7 +149,7 @@
       >
         <Icon
           name="flag"
-          class="text-indigo-600/80"
+          class="text-brand"
           width={32}
           height={32}
         />{translate('workflows.current-details')}
diff --git a/src/lib/vendor/codemirror/theme.ts b/src/lib/vendor/codemirror/theme.ts
index f48de47eb..dc0c735f0 100644
--- a/src/lib/vendor/codemirror/theme.ts
+++ b/src/lib/vendor/codemirror/theme.ts
@@ -5,7 +5,13 @@ import colors from 'tailwindcss/colors';
 
 import { css } from '$lib/theme/utilities';
 
-export const TEMPORAL_THEME = (isDark) =>
+export const TEMPORAL_THEME = ({
+  isDark,
+  copyable,
+}: {
+  isDark: boolean;
+  copyable: boolean;
+}) =>
   EditorView.theme(
     {
       '&': {
@@ -22,6 +28,7 @@ export const TEMPORAL_THEME = (isDark) =>
       '.cm-content': {
         caretColor: css('--color-text-primary'),
         fontSize: '0.875em',
+        ...(copyable && { marginRight: '1.75rem' }),
       },
       '.cm-editor&.cm-focused': {
         outline: `3px solid ${colors.indigo['600']}`,