diff --git a/frontend/src/components/v2/Tooltip/Tooltip.tsx b/frontend/src/components/v2/Tooltip/Tooltip.tsx
index 2eb443b4e..12d4397d9 100644
--- a/frontend/src/components/v2/Tooltip/Tooltip.tsx
+++ b/frontend/src/components/v2/Tooltip/Tooltip.tsx
@@ -43,23 +43,25 @@ export const Tooltip = ({
       onOpenChange={onOpenChange}
     >
       <TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Content
-        side={position}
-        align="center"
-        sideOffset={5}
-        {...props}
-        className={twMerge(
-          "z-50 max-w-[15rem] select-none border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade",
-          isDisabled && "!hidden",
-          center && "text-center",
-          size === "sm" && "rounded-sm px-2 py-1 text-xs",
-          size === "md" && "rounded-md px-4 py-2 text-sm",
-          className
-        )}
-      >
-        {content}
-        <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-600" />
-      </TooltipPrimitive.Content>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          side={position}
+          align="center"
+          sideOffset={5}
+          {...props}
+          className={twMerge(
+            "z-50 max-w-[15rem] select-none border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade",
+            isDisabled && "!hidden",
+            center && "text-center",
+            size === "sm" && "rounded-sm px-2 py-1 text-xs",
+            size === "md" && "rounded-md px-4 py-2 text-sm",
+            className
+          )}
+        >
+          {content}
+          <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-600" />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>
   ) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment
diff --git a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
index 6797b8e38..1c2b7f437 100644
--- a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
@@ -176,7 +176,7 @@ export const ProjectSelect = () => {
                   >
                     <div className="flex items-center">
                       <div className="flex flex-1 items-center justify-between overflow-hidden">
-                        <Tooltip content={workspace.name}>
+                        <Tooltip className="text-ellipsiss" content={workspace.name}>
                           <div className="max-w-40 overflow-hidden truncate whitespace-nowrap">
                             {workspace.name}
                           </div>