From 5f2a1b4e41a6c3206a75a6cf52ac3a6f8c49f2c1 Mon Sep 17 00:00:00 2001
From: "andrii.dudar" <andriid@comet.com>
Date: Fri, 6 Sep 2024 10:58:09 +0200
Subject: [PATCH] - fix styles for hotkey tooltip (#190)

- fix styles for code editor
---
 .../src/components/shared/CodeHighlighter/CodeHighlighter.tsx | 4 ++--
 .../components/shared/SyntaxHighlighter/SyntaxHighlighter.tsx | 2 +-
 .../src/components/shared/TooltipWrapper/TooltipWrapper.tsx   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/opik-frontend/src/components/shared/CodeHighlighter/CodeHighlighter.tsx b/apps/opik-frontend/src/components/shared/CodeHighlighter/CodeHighlighter.tsx
index 0eea30b18f..d697ce6df9 100644
--- a/apps/opik-frontend/src/components/shared/CodeHighlighter/CodeHighlighter.tsx
+++ b/apps/opik-frontend/src/components/shared/CodeHighlighter/CodeHighlighter.tsx
@@ -33,8 +33,8 @@ const CodeHighlighter: React.FunctionComponent<CodeHighlighterProps> = ({
   const { themeMode } = useTheme();
 
   return (
-    <div className="relative rounded-md border p-2">
-      <div className="absolute right-2 top-1 z-10">
+    <div className="relative rounded-md border">
+      <div className="absolute right-2 top-0.5 z-10">
         <CopyButton
           message="Successfully copied code"
           text={data}
diff --git a/apps/opik-frontend/src/components/shared/SyntaxHighlighter/SyntaxHighlighter.tsx b/apps/opik-frontend/src/components/shared/SyntaxHighlighter/SyntaxHighlighter.tsx
index f9c1d1a4b3..1e6377cbcd 100644
--- a/apps/opik-frontend/src/components/shared/SyntaxHighlighter/SyntaxHighlighter.tsx
+++ b/apps/opik-frontend/src/components/shared/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -53,7 +53,7 @@ const SyntaxHighlighter: React.FunctionComponent<SyntaxHighlighterProps> = ({
           tooltipText="Copy code"
         />
       </div>
-      <div className="p-2">
+      <div>
         <CodeMirror
           theme={themeMode}
           value={formattedCodeByLanguage}
diff --git a/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx b/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx
index 436beed51e..12052653b3 100644
--- a/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx
+++ b/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx
@@ -29,7 +29,7 @@ const TooltipWrapper: React.FunctionComponent<TooltipWrapperProps> = ({
           <TooltipContent side={side} variant={hotkey ? "hotkey" : "default"}>
             {content}
             {hotkey && (
-              <div className="flex h-5 min-w-5 items-center justify-center rounded-s border border-light-slate px-1 text-light-slate">
+              <div className="flex h-5 min-w-5 items-center justify-center rounded-sm border border-light-slate px-1 text-light-slate">
                 {hotkey}
               </div>
             )}