Issue 739 tooltip align fix seam

manifest.json

@@ -7,18 +7,10 @@
   "icons": {
     "128": "icon128.png"
   },
-  "permissions": [
-    "scripting",
-    "storage",
-    "clipboardWrite"
-  ],
-  "host_permissions": [
-    "http://*/*",
-    "https://*/*",
-    "file://*"
-  ],
+  "permissions": ["scripting", "storage", "clipboardWrite"],
+  "host_permissions": ["http://*/*", "https://*/*", "file://*"],
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"
   },
   "options_page": "options.html"
-}
+}

package.json

@@ -132,4 +132,4 @@
     "webpack": "^5.83.1",
     "webpack-cli": "5.1.4"
   }
-}
+}

src/app/components/StatusBar.tsx

@@ -100,7 +100,7 @@ export const StatusBar = () => {
       </div>
       <Space size={[10, 0]} className="header__space">
         {isSessionUnique && <OnboardingButton />}
-        <Tooltip title={componentsTexts.StatusBarVersionReadme}>
+        <Tooltip title={componentsTexts.StatusBarVersionReadme} align={{ offset: [16, 0] }}>
           <Button
             ref={readmeRef}
             type="link"

src/app/styles/statusBar.less

@@ -23,3 +23,4 @@
     }
   }
 }
+

src/common/components/breadcrumbs/breadcrumbs.less

@@ -3,18 +3,5 @@
 .jdn {
   &__breadcrumbs {
     overflow-wrap: anywhere;
-
-    & .ant-tooltip-inner {
-      max-height: 350px;
-      overflow-y: clip;
-      display: -webkit-box;
-      -webkit-line-clamp: 15;
-      -webkit-box-orient: vertical;
-    }
-
-    & .ant-tooltip {
-      word-break: break-all;
-      max-width: 100%;
-    }
   }
 }

src/common/styles/ant.less

@@ -83,3 +83,22 @@
   max-height: 104px;
   overflow-y: auto;
 }
+
+/* Tooltip */
+.ant-tooltip {
+  word-break: break-all;
+  max-width: 100%;
+}
+
+&.ant-tooltip-arrow {
+  margin-top: 6px;
+}
+
+.ant-tooltip-inner {
+  margin-top: 6px;
+  max-height: 350px;
+  overflow-y: clip;
+  display: -webkit-box;
+  -webkit-line-clamp: 15;
+  -webkit-box-orient: vertical;
+}

src/features/locators/components/LocatorCopyButton.tsx

@@ -34,7 +34,7 @@ export const LocatorCopyButton: React.FC<Props> = ({ framework, element, pageObj
   };
 
   return (
-    <Tooltip placement="bottom" title={copyTooltipTitle} align={{ offset: [0, -10] }}>
+    <Tooltip placement="bottom" title={copyTooltipTitle} align={{ offset: [0, -1] }}>
       <Button
         onClick={handleCopy}
         onMouseEnter={handleMouseEnter}

src/features/locators/styles/locator.less

@@ -73,3 +73,7 @@
       }
     }
 }
+
+.ant-tooltip-content {
+  margin-top: -1px;
+}

src/features/onboarding/components/OnboardingTooltip.tsx

@@ -12,7 +12,9 @@ export const OnboardingTooltip: FC<Props> = ({ children }) => {
   return (
     <>
       {isOnboardingOpen ? (
-        <Tooltip title="Available only after completing the onboarding">{children}</Tooltip>
+        <Tooltip placement="top" title="Available only after completing the onboarding">
+          {children}
+        </Tooltip>
       ) : (
         children
       )}

src/features/onboarding/styles/onboarding.less

@@ -11,3 +11,4 @@
 .ant-tour {
   max-width: 95%;
 }
+

src/features/pageObjects/styles/generationButtons.less

@@ -33,3 +33,4 @@
     }
   }
 }
+

src/features/pageObjects/styles/pageObject.less

@@ -11,22 +11,16 @@
       }
 
       & .ant-tooltip {
-        max-width: calc(100% - 1px);
-        word-break: break-all;
         padding: 5px 14px;
 
         .ant-tooltip-arrow {
-          top: 5px;
+          top: 8px;
           left: 27px;
         }
       }
 
       & .ant-tooltip-inner {
-        max-height: 350px;
-        overflow-y: clip;
-        display: -webkit-box;
-        -webkit-line-clamp: 15;
-        -webkit-box-orient: vertical;
+        margin-top: 8px;
       }
     }
 
@@ -139,4 +133,4 @@
       padding: 4px 8px 4px 32px;
       width: 100%;
     }
-}
+}