Add translate prop to Tooltip and adjust new tab tooltip position

- add new prop to tooltip: translate: {x? y?}. set for 'new tab': x 2px

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        ├── Tooltip
                        │   ├── Tooltip.module.scss
                        │   ├── Tooltip.tsx
                        │   └── index.ts
                        └── prompts
                            └── PromptField
                                ├── PromptField.tsx
                                └── components
                                    └── Tabs
                                        └── Tabs.tsx

Author: robertpiosik

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

@@ -9,12 +9,18 @@ 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?.x !== undefined || params.translate?.y !== undefined
+      ? {
+          translate: `${params.translate?.x ?? 0}px ${params.translate?.y ?? 0}px`
+        }
       : {})
   } as React.CSSProperties
 

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

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