From a756ebec7a7434b108d39ac4cd806150afff7d79 Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Sun, 1 Mar 2026 00:41:55 +0200
Subject: [PATCH 1/2] added title for showing the full time and date of an
 event on hover

---
 src/app/components/message/Time.tsx | 23 +++++++++++++++++++++--
 src/app/utils/time.ts               |  3 +++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/components/message/Time.tsx b/src/app/components/message/Time.tsx
index 3eab5cc2f1..77c9468305 100644
--- a/src/app/components/message/Time.tsx
+++ b/src/app/components/message/Time.tsx
@@ -1,6 +1,12 @@
 import React, { ComponentProps } from 'react';
 import { Text, as } from 'folds';
-import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import {
+  timeDayMonYear,
+  timeHourMinute,
+  timeHourMinuteSecond,
+  today,
+  yesterday,
+} from '../../utils/time';
 
 export type TimeProps = {
   compact?: boolean;
@@ -36,8 +42,21 @@ export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
       time = `${timeDayMonYear(ts, dateFormatString)} ${formattedTime}`;
     }
 
+    const timeTitle = `Sent ${timeDayMonYear(ts, dateFormatString)}, at ${timeHourMinuteSecond(
+      ts,
+      hour24Clock
+    )}`;
+
     return (
-      <Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
+      <Text
+        as="time"
+        style={{ flexShrink: 0 }}
+        size="T200"
+        priority="300"
+        {...props}
+        title={timeTitle}
+        ref={ref}
+      >
         {time}
       </Text>
     );
diff --git a/src/app/utils/time.ts b/src/app/utils/time.ts
index 8f1e30e93b..23d132679c 100644
--- a/src/app/utils/time.ts
+++ b/src/app/utils/time.ts
@@ -21,6 +21,9 @@ export const timeYear = (ts: number): string => dayjs(ts).format('YYYY');
 export const timeHourMinute = (ts: number, hour24Clock: boolean): string =>
   dayjs(ts).format(hour24Clock ? 'HH:mm' : 'hh:mm A');
 
+export const timeHourMinuteSecond = (ts: number, hour24Clock: boolean): string =>
+  dayjs(ts).format(hour24Clock ? 'HH:mm:ss' : 'hh:mm A');
+
 export const timeDayMonYear = (ts: number, dateFormatString: string): string =>
   dayjs(ts).format(dateFormatString);
 

From f7f62d94e181fefa7a11ead567b789d2c2187330 Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Sun, 1 Mar 2026 23:14:55 +0200
Subject: [PATCH 2/2] set up tooltip

---
 src/app/components/message/Time.tsx | 43 ++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/app/components/message/Time.tsx b/src/app/components/message/Time.tsx
index 77c9468305..4280f93d51 100644
--- a/src/app/components/message/Time.tsx
+++ b/src/app/components/message/Time.tsx
@@ -1,5 +1,5 @@
 import React, { ComponentProps } from 'react';
-import { Text, as } from 'folds';
+import { Text, as, Tooltip, TooltipProvider, toRem } from 'folds';
 import {
   timeDayMonYear,
   timeHourMinute,
@@ -42,23 +42,34 @@ export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
       time = `${timeDayMonYear(ts, dateFormatString)} ${formattedTime}`;
     }
 
-    const timeTitle = `Sent ${timeDayMonYear(ts, dateFormatString)}, at ${timeHourMinuteSecond(
-      ts,
-      hour24Clock
-    )}`;
-
     return (
-      <Text
-        as="time"
-        style={{ flexShrink: 0 }}
-        size="T200"
-        priority="300"
-        {...props}
-        title={timeTitle}
-        ref={ref}
+      <TooltipProvider
+        delay={400}
+        position="Top"
+        style={{ textAlign: 'center' }}
+        tooltip={
+          <Tooltip>
+            <Text size="H5">
+              {timeDayMonYear(ts, dateFormatString)}
+              <br />
+              {timeHourMinuteSecond(ts, hour24Clock)}
+            </Text>
+          </Tooltip>
+        }
       >
-        {time}
-      </Text>
+        {(triggerRef) => (
+          <Text
+            as="time"
+            style={{ flexShrink: 0 }}
+            size="T200"
+            priority="300"
+            {...props}
+            ref={triggerRef}
+          >
+            {time}
+          </Text>
+        )}
+      </TooltipProvider>
     );
   }
 );