feat: resolved tooltip overflow

This commit is contained in:
=
2025-07-03 00:41:47 +05:30
parent abfe185a5b
commit 3a17281e37
2 changed files with 20 additions and 18 deletions
+19 -17
View File
@@ -43,23 +43,25 @@ export const Tooltip = ({
onOpenChange={onOpenChange} onOpenChange={onOpenChange}
> >
<TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger> <TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content <TooltipPrimitive.Portal>
side={position} <TooltipPrimitive.Content
align="center" side={position}
sideOffset={5} align="center"
{...props} sideOffset={5}
className={twMerge( {...props}
"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", className={twMerge(
isDisabled && "!hidden", "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",
center && "text-center", isDisabled && "!hidden",
size === "sm" && "rounded-sm px-2 py-1 text-xs", center && "text-center",
size === "md" && "rounded-md px-4 py-2 text-sm", size === "sm" && "rounded-sm px-2 py-1 text-xs",
className size === "md" && "rounded-md px-4 py-2 text-sm",
)} className
> )}
{content} >
<TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-600" /> {content}
</TooltipPrimitive.Content> <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-600" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
</TooltipPrimitive.Root> </TooltipPrimitive.Root>
) : ( ) : (
// eslint-disable-next-line react/jsx-no-useless-fragment // eslint-disable-next-line react/jsx-no-useless-fragment
@@ -176,7 +176,7 @@ export const ProjectSelect = () => {
> >
<div className="flex items-center"> <div className="flex items-center">
<div className="flex flex-1 items-center justify-between overflow-hidden"> <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"> <div className="max-w-40 overflow-hidden truncate whitespace-nowrap">
{workspace.name} {workspace.name}
</div> </div>