update structuring

src/components/TruncateText.tsx

@@ -1,19 +1,15 @@
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
-import { Box, styled, Typography } from '@mui/material';
-export const EllipseText = styled(Typography)`
-    /* white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis; */
-    word-break: break-word;
-`;
+import { Box, Typography } from '@mui/material';
 
 export default function TruncateText({ text }) {
     return (
         <Tooltip title={text}>
             <Box height={34} overflow="hidden">
                 {/* todo add ellipsis */}
-                <EllipseText variant="body2">{text}</EllipseText>
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                    {text}
+                </Typography>
             </Box>
         </Tooltip>
     );