CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-08-04 14:57:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

🎨 fix: Gate message timestamp reveal on hover capability, not width

Browse source 
Use a (hover: hover) media query instead of the md: breakpoint so the timestamp stays visible on touch and other non-hover devices (e.g. tablets wider than md), while still revealing on hover/focus where a pointer supports it.
This commit is contained in:
Marco Beretta 2026-06-12 14:31:17 +02:00
parent a4ae5b7e5e
commit 61fc312320
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
1 changed files with 5 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
client/src/components/Chat/Messages/ui/MessageTimestamp.tsx
View file

@ -4,9 +4,10 @@ import { getMessageTimestamp } from '~/utils';
/**
* Inline message timestamp shown next to the author name in the message header.
* Reveals on row hover (desktop) and stays visible on touch. Recent messages show
* the relative form ("10 minutes ago") with the absolute date on hover; older
* messages show the absolute date directly.
* On hover-capable pointers it reveals on row hover/focus; on touch and other
* non-hover devices it stays visible. Recent messages show the relative form
* ("10 minutes ago") with the absolute date on hover; older messages show the
* absolute date directly.
*/
export default function MessageTimestamp({ value }: { value?: string | null }) {
const { i18n } = useTranslation();
@ -23,7 +24,7 @@ export default function MessageTimestamp({ value }: { value?: string | null }) {
<time
dateTime={timestamp.iso}
title={timestamp.isRecent ? timestamp.absolute : undefined}
className="ml-2 text-xs font-normal text-text-secondary transition-opacity duration-200 md:opacity-0 md:group-focus-within:opacity-100 md:group-hover:opacity-100"
className="ml-2 text-xs font-normal text-text-secondary transition-opacity duration-200 group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:hover)]:opacity-0"
>
{timestamp.isRecent ? timestamp.relative : timestamp.absolute}
</time>