chore: fix workspace tab tooltip overflow COMPASS-9244 (#6850)

* ellipsis if the connection name gets too long

* actually rather ust break the line

Author: lerouxb

packages/compass-components/src/components/workspace-tabs/tab.tsx

@@ -180,6 +180,11 @@ const closeButtonStyles = css({
   marginRight: spacing[100],
 });
 
+const workspaceTabTooltipStyles = css({
+  overflowWrap: 'anywhere',
+  textWrap: 'wrap',
+});
+
 type TabProps = {
   connectionName?: string;
   type: string;
@@ -326,7 +331,7 @@ function Tab({
       {tooltip && (
         <div data-testid="workspace-tab-tooltip">
           {tooltip.map(([label, value]) => (
-            <div key={label}>
+            <div key={label} className={workspaceTabTooltipStyles}>
               <b>{label}:</b> {value}
             </div>
           ))}