From f029974473ff87f8d5f1e7c6c20bc6049231230a Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 9 Nov 2026 00:38:12 +0000
Subject: [PATCH] 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 | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Dashboard/common/TimeDisplay.jsx b/src/components/Dashboard/common/TimeDisplay.jsx
index 6aa3189c..c9a361ac 100644
--- a/src/components/Dashboard/common/TimeDisplay.jsx
+++ b/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>
-      {showDate || showTime ? <Text type={type}>{formattedDate}</Text> : null}
-      {showSince ? <Tag style={{ margin: 0 }}>{timeAgo}</Tag> : null}
+    <Flex
+      align={'center'}
+      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>
   )
 }