From d52a8eb5709494e41d9827674f022668c6834e9a Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Thu, 20 Aug 2026 21:03:32 +0100
Subject: [PATCH] Refactor ElipsisText component to integrate Tooltip for
 truncated text

- Updated the ElipsisText component to conditionally wrap truncated text in a Tooltip, enhancing user experience by providing additional context on hover.
- Simplified the rendering logic by consolidating the content structure, improving code readability and maintainability.
---
 .../Dashboard/common/ElipsisText.jsx          | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/Dashboard/common/ElipsisText.jsx b/src/components/Dashboard/common/ElipsisText.jsx
index fd06cd72..1c66ca08 100644
--- a/src/components/Dashboard/common/ElipsisText.jsx
+++ b/src/components/Dashboard/common/ElipsisText.jsx
@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { Typography } from 'antd'
+import Tooltip from './Tooltip'
 
 const { Text } = Typography
 
@@ -70,29 +71,32 @@ const ElipsisText = ({ children, style, className, title, code, ...rest }) => {
   const showTruncated = truncated && Boolean(end)
   const RootTag = code ? 'code' : 'span'
 
+  const content = (
+    <span
+      className={showTruncated ? 'elipsis-text is-truncated' : 'elipsis-text'}
+      ref={containerRef}
+    >
+      <RootTag className='elipsis-text-measure' ref={measureRef}>
+        {text}
+      </RootTag>
+      <RootTag className='elipsis-text-full'>{text}</RootTag>
+      <RootTag className='elipsis-text-truncated'>
+        <span className='elipsis-text-start'>{start}</span>
+        <span className='elipsis-text-dots'>...</span>
+        <span className='elipsis-text-end'>
+          <span className='elipsis-text-end-inner'>{end}</span>
+        </span>
+      </RootTag>
+    </span>
+  )
+
   return (
     <Text
       {...rest}
       className={['elipsis-text-wrapper', className].filter(Boolean).join(' ')}
-      title={title ?? text}
       style={style}
     >
-      <span
-        className={showTruncated ? 'elipsis-text is-truncated' : 'elipsis-text'}
-        ref={containerRef}
-      >
-        <RootTag className='elipsis-text-measure' ref={measureRef}>
-          {text}
-        </RootTag>
-        <RootTag className='elipsis-text-full'>{text}</RootTag>
-        <RootTag className='elipsis-text-truncated'>
-          <span className='elipsis-text-start'>{start}</span>
-          <span className='elipsis-text-dots'>...</span>
-          <span className='elipsis-text-end'>
-            <span className='elipsis-text-end-inner'>{end}</span>
-          </span>
-        </RootTag>
-      </span>
+      {truncated ? <Tooltip title={title ?? text}>{content}</Tooltip> : content}
     </Text>
   )
 }