[ENG-1133] Tooltip overflow fix - take up y-axis space (#1374)

Tooltip overflow fix, take up y-axis space

interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx

@@ -154,7 +154,12 @@ export const RenameTextBoxBase = forwardRef<HTMLDivElement | null, Props>(
 		}, [blur]);
 
 		return (
-			<Tooltip label={!isTruncated || allowRename ? null : text} asChild>
+			<Tooltip
+				labelClassName="break-all"
+				tooltipClassName="!max-w-[250px]"
+				label={!isTruncated || allowRename ? null : text}
+				asChild
+			>
 				<div
 					ref={ref}
 					role="textbox"

packages/ui/src/Tooltip.tsx

@@ -9,6 +9,7 @@ export interface TooltipProps extends PropsWithChildren {
 	position?: 'top' | 'right' | 'bottom' | 'left';
 	className?: string;
 	tooltipClassName?: string;
+	labelClassName?: string;
 	asChild?: boolean;
 	hoverable?: boolean;
 	keybinds?: Array<String | keyof typeof ModifierKeys>;
@@ -45,7 +46,7 @@ export const Tooltip = ({ position = 'bottom', hoverable = true, ...props }: Too
 								props.tooltipClassName
 							)}
 						>
-							{props.label}
+							<p className={props.labelClassName}>{props.label}</p>
 							{props.keybinds && (
 								<div className="flex items-center justify-center gap-1">
 									{separateKeybinds(props.keybinds)?.map((k, _) => (