mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-06 22:27:22 +00:00
feat: resolved tooltip overflow
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user