From 5dd7bd8783b0d73537fbe2006a19d498bb6f37ad Mon Sep 17 00:00:00 2001
From: Jarek Danielak <jarek.danielak@camunda.com>
Date: Mon, 16 Mar 2026 10:15:18 +0100
Subject: [PATCH] fix: position code editor button tooltip next to the button

---
 lib/components/Input/InputEditor.jsx   | 18 ++++++++++--------
 lib/components/Output/OutputEditor.jsx | 22 ++++++++++++----------
 lib/style/style.scss                   |  3 +--
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/lib/components/Input/InputEditor.jsx b/lib/components/Input/InputEditor.jsx
index ccb731e..cf32050 100644
--- a/lib/components/Input/InputEditor.jsx
+++ b/lib/components/Input/InputEditor.jsx
@@ -174,14 +174,16 @@ export default function InputEditor({
   }, [ editorView, value ]);
 
   return <div className={ classNames('code__editor', { 'code__editor--error': error }) }>
-    <Button
-      className="code__editor-clear-button"
-      renderIcon={ Erase }
-      iconDescription="Clear editor"
-      size="sm"
-      kind="ghost"
-      hasIconOnly
-      onClick={ onClear } />
+    <div className="code__editor-buttons">
+      <Button
+        renderIcon={ Erase }
+        iconDescription="Clear editor"
+        size="sm"
+        kind="ghost"
+        hasIconOnly
+        tooltipPosition="left"
+        onClick={ onClear } />
+    </div>
     <div className="code__editor-codemirror">
       <div ref={ ref } className="code__editor-codemirror-inner"></div>
     </div>
diff --git a/lib/components/Output/OutputEditor.jsx b/lib/components/Output/OutputEditor.jsx
index c59e6ce..f479f0e 100644
--- a/lib/components/Output/OutputEditor.jsx
+++ b/lib/components/Output/OutputEditor.jsx
@@ -66,16 +66,18 @@ export default function OutputEditor({ value }) {
   }, [ editorView, value ]);
 
   return <div className="code__editor">
-    <Button
-      className="code__editor-copy-button"
-      renderIcon={ Copy }
-      iconDescription="Copy to clipboard"
-      size="sm"
-      kind="ghost"
-      hasIconOnly
-      onClick={ () => {
-        navigator.clipboard.writeText(value);
-      } } />
+    <div className="code__editor-buttons">
+      <Button
+        renderIcon={ Copy }
+        iconDescription="Copy to clipboard"
+        size="sm"
+        kind="ghost"
+        hasIconOnly
+        tooltipPosition="left"
+        onClick={ () => {
+          navigator.clipboard.writeText(value);
+        } } />
+    </div>
     <div className="code__editor-codemirror">
       <div ref={ ref } className="code__editor-codemirror-inner"></div>
     </div>
diff --git a/lib/style/style.scss b/lib/style/style.scss
index 94417fe..4de238a 100644
--- a/lib/style/style.scss
+++ b/lib/style/style.scss
@@ -901,8 +901,7 @@
       margin-top: 5px;
     }
 
-    .code__editor-copy-button,
-    .code__editor-clear-button {
+    .code__editor-buttons {
       position: absolute;
       top: 5px;
       right: 5px;