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

@@ -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>