Refactor tooltip positioning and remove unused translation properties

Author: robertpiosik

packages/ui/src/components/editor/common/Tooltip/Tooltip.module.scss

@@ -51,16 +51,13 @@
     }
 
     &.tooltip--align-left {
-      transform: translateY(calc(-100% + 1px))
-        translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
+      transform: translateY(calc(-100% + 1px));
     }
     &.tooltip--align-right {
-      transform: translateY(calc(-100% + 1px))
-        translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
+      transform: translateY(calc(-100% + 1px));
     }
     &.tooltip--align-center {
-      transform: translateX(-50%) translateY(calc(-100% - 5px))
-        translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
+      transform: translateX(-50%) translateY(calc(-100% - 5px));
     }
   }
 
@@ -74,16 +71,13 @@
     }
 
     &.tooltip--align-left {
-      transform: translateY(4px)
-        translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
+      transform: translateY(4px);
     }
     &.tooltip--align-right {
-      transform: translateY(4px)
-        translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
+      transform: translateY(4px);
     }
     &.tooltip--align-center {
-      transform: translateX(-50%) translateY(4px)
-        translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
+      transform: translateX(-50%) translateY(4px);
     }
   }
 
@@ -98,8 +92,7 @@
     }
 
     &.tooltip--align-center {
-      transform: translateY(-50%) translateX(6px)
-        translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
+      transform: translateY(-50%) translateX(6px);
 
       &::after {
         top: 50%;

packages/ui/src/components/editor/common/Tooltip/Tooltip.tsx

@@ -9,19 +9,12 @@ type Props = {
   is_warning?: boolean
   details?: React.ReactNode
   offset?: number
-  translate?: { x: number; y: number }
 }
 
 export const Tooltip: React.FC<Props> = (params) => {
   const style = {
     ...(params.offset !== undefined
       ? { '--tooltip-offset': `${params.offset}px` }
-      : {}),
-    ...(params.translate
-      ? {
-          '--tooltip-translate-x': `${params.translate.x}px`,
-          '--tooltip-translate-y': `${params.translate.y}px`
-        }
       : {})
   } as React.CSSProperties
 

packages/ui/src/components/editor/common/prompts/PromptField/components/Footer/Footer.tsx

@@ -201,6 +201,13 @@ export const Footer: React.FC<Props> = (props) => {
           offset={28}
         />
       )}
+      {hovered_left_action == 'slash' && (
+        <Tooltip
+          message={props.props.translations.use_template}
+          align="left"
+          offset={48}
+        />
+      )}
       {show_submit_tooltip && (
         <Tooltip
           message={
@@ -261,12 +268,6 @@ export const Footer: React.FC<Props> = (props) => {
           onMouseEnter={() => set_hovered_left_action('slash')}
           onMouseLeave={() => set_hovered_left_action(null)}
         >
-          {hovered_left_action == 'slash' && (
-            <Tooltip
-              message={props.props.translations.use_template}
-              align="center"
-            />
-          )}
           <Icon variant="SLASH" />
         </button>
         <span className={styles.icon}></span>

packages/ui/src/components/editor/common/prompts/PromptField/components/Tabs/Tabs.tsx

@@ -94,8 +94,7 @@ export const Tabs = forwardRef<TabsRef, Props>((props, ref) => {
               message={props.translations.new_tab}
               position="bottom"
               align="right"
-              offset={6}
-              translate={{ x: 5, y: 0 }}
+              offset={1}
             />
           )}
           <div className={styles['tabs__tab__icon']} />