[web] ui/tooltip: add hyphenated option

apps/web/src/components/projects/common/ProjectsImageComparison.tsx

@@ -303,6 +303,7 @@ export default function ProjectsImageComparison({
             <div className="flex items-center gap-2">
               <Tooltip
                 asChild={true}
+                hyphenated={true}
                 label={deploymentUrls[selectedScreenIndex].href}>
                 <Anchor
                   className={clsx(

apps/web/src/components/ui/Tooltip/Tooltip.tsx

@@ -29,6 +29,7 @@ type Props = Readonly<{
   children: ReactNode;
   className?: string;
   delayDuration?: number;
+  hyphenated?: boolean;
   invert?: boolean;
   label?: ReactNode;
   side?: TooltipContentSide;
@@ -41,13 +42,14 @@ export default function Tooltip({
   align = 'center',
   asChild = false,
   children,
-  delayDuration,
   className,
-  triggerClassName,
+  delayDuration,
+  hyphenated = false,
   invert = false,
   label,
   side = 'top',
   size = 'sm',
+  triggerClassName,
   triggerType = 'button', // To prevent clicking on tooltip from submitting if it is within a form.
 }: Props) {
   const tooltipBackgroundColor = invert
@@ -72,6 +74,7 @@ export default function Tooltip({
             align={align}
             className={clsx(
               tooltipContentClassName,
+              hyphenated && 'hyphens-auto',
               tooltipBackgroundColor,
               sizeClasses[size],
               textVariants({

apps/web/src/components/ui/Tooltip/tooltipStyles.tsx

@@ -5,7 +5,6 @@ export const tooltipContentClassName = clsx(
   'rounded',
   'z-tooltip',
   'max-w-64',
-  'hyphens-auto',
   'z-popover',
   'animate-in data-[state=closed]:animate-out',
   'fade-in-0 data-[state=closed]:fade-out-0',