Fix overlap of copy button on CodeBlock component (#2470)

* Add margin if copyable button is visible * Fix text color in current details
temporalio · Dec 11, 2024 · f4425b3 · f4425b3
1 parent c1117f3
commit f4425b3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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']}`,