Refactor TimeDisplay Component to Integrate ElipsisText and Improve Layout

- Added ElipsisText component for better text handling within TimeDisplay.
- Updated Flex container styles to ensure proper alignment and responsiveness.
- Enhanced conditional rendering for date and time display, improving overall user experience.

src/components/Dashboard/common/TimeDisplay.jsx

@@ -7,6 +7,7 @@ import {
   DEFAULT_DATE_TIME_FORMAT,
   splitDateTimeFormat
 } from '../../../database/Settings'
+import ElipsisText from './ElipsisText'
 
 const { Text } = Typography
 
@@ -118,9 +119,18 @@ const TimeDisplay = ({
     : ''
 
   return (
-    <Flex align={'center'} gap={'small'} wrap>
+    <Flex
-      {showDate || showTime ? <Text type={type}>{formattedDate}</Text> : null}
+      align={'center'}
-      {showSince ? <Tag style={{ margin: 0 }}>{timeAgo}</Tag> : null}
+      gap={'small'}
+      wrap
+      style={{ minWidth: 0, maxWidth: '100%' }}
+    >
+      {showDate || showTime ? (
+        <ElipsisText type={type}>{formattedDate}</ElipsisText>
+      ) : null}
+      {showSince ? (
+        <Tag style={{ margin: 0, flexShrink: 0 }}>{timeAgo}</Tag>
+      ) : null}
     </Flex>
   )
 }