Adjust tab padding and new tab tooltip offset in PromptField Tabs

- it's easy to create new tab by mistake, when we really wanted to clear/close

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── prompts
                            ├── PromptField
                            │   ├── PromptField.module.scss
                            │   ├── PromptField.stories.tsx
                            │   ├── PromptField.tsx
                            │   ├── components
                            │   │   ├── CompletedTasks
                            │   │   │   ├── CompletedTasks.module.scss
                            │   │   │   ├── CompletedTasks.tsx
                            │   │   │   └── index.ts
                            │   │   ├── Footer
                            │   │   │   ├── Footer.module.scss
                            │   │   │   ├── Footer.tsx
                            │   │   │   └── index.ts
                            │   │   └── Tabs
                            │   │       ├── Tabs.module.scss
                            │   │       ├── Tabs.tsx
                            │   │       └── index.ts
                            │   ├── hooks
                            │   │   ├── use-drag-drop.ts
                            │   │   ├── use-dropdown.ts
                            │   │   ├── use-ghost-text.ts
                            │   │   ├── use-handlers
                            │   │   │   ├── handle-copy.ts
                            │   │   │   ├── handle-cut.ts
                            │   │   │   ├── handle-input-change.ts
                            │   │   │   ├── handle-input-click.ts
                            │   │   │   ├── handle-key-down.ts
                            │   │   │   ├── handle-paste.ts
                            │   │   │   ├── handle-submit.ts
                            │   │   │   ├── index.ts
                            │   │   │   ├── types.ts
                            │   │   │   ├── use-handlers.ts
                            │   │   │   └── utils.ts
                            │   │   └── use-keyboard-shortcuts.ts
                            │   └── index.ts
                            ├── Template
                            │   ├── Template.module.scss
                            │   ├── Template.tsx
                            │   └── index.ts
                            └── shared
                                └── symbols
                                    ├── caret.ts
                                    ├── get-highlighted-text.tsx
                                    ├── index.ts
                                    ├── position-mapping.ts
                                    ├── prompt-symbols.module.scss
                                    ├── reconstruct-raw-value.ts
                                    └── use-symbol-deletion.ts

Author: robertpiosik

packages/ui/src/components/editor/common/prompts/PromptField/components/Tabs/Tabs.module.scss

@@ -20,11 +20,12 @@
     opacity: var(--dimmed-opacity);
 
     &--new {
-      padding-right: 14px;
+      padding-right: 9px;
       padding-left: 7px;
     }
 
     &--close {
+      padding-left: 5px;
       padding-right: 10px;
 
       .tabs__tab__icon {

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

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