From 3bc72c84e0e55e2197dc7de7d6a238ba88a8f01f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Mon, 10 Feb 2025 12:29:58 +0000
Subject: [PATCH] chore: make truncator a span (#9272)

https://linear.app/unleash/issue/2-3255/make-truncator-a-span-instead-of-a-box

Makes the Truncator a `span` instead of a `Box`.

This should make it more flexible and help us avoid DOM nesting errors.
---
 frontend/src/component/common/Truncator/Truncator.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/common/Truncator/Truncator.tsx b/frontend/src/component/common/Truncator/Truncator.tsx
index 42c4415b4b..8302845f12 100644
--- a/frontend/src/component/common/Truncator/Truncator.tsx
+++ b/frontend/src/component/common/Truncator/Truncator.tsx
@@ -39,6 +39,7 @@ export const Truncator = ({
     arrow,
     tooltipProps,
     children,
+    component = 'span',
     ...props
 }: ITruncatorProps) => {
     const [isTruncated, setIsTruncated] = useState(false);
@@ -69,7 +70,12 @@ export const Truncator = ({
 
     return (
         <Tooltip title={isTruncated ? tooltipTitle : ''} {...otherTooltipProps}>
-            <StyledTruncatorContainer ref={ref} lines={lines} {...props}>
+            <StyledTruncatorContainer
+                ref={ref}
+                lines={lines}
+                component={component}
+                {...props}
+            >
                 {children}
             </StyledTruncatorContainer>
         </Tooltip>