fix(webui): align timestamp tooltip styles

webui/src/components/MessageBubble.tsx

@@ -4,6 +4,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type ComponentPropsWithoutRef,
   type ReactNode,
 } from "react";
 import {
@@ -80,6 +81,42 @@ function ForkArrowIcon({ className }: { className?: string }) {
   );
 }
 
+type MessageTimestampProps = Omit<
+  ComponentPropsWithoutRef<"time">,
+  "dateTime" | "title"
+> & {
+  timestamp: number;
+  tooltipLabel: string;
+};
+
+function MessageTimestamp({
+  timestamp,
+  tooltipLabel,
+  className,
+  children,
+  ...props
+}: MessageTimestampProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <time
+          {...props}
+          dateTime={new Date(timestamp).toISOString()}
+          tabIndex={0}
+          className={cn(
+            "cursor-help text-[11px] leading-none text-muted-foreground/70 tabular-nums",
+            "focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className,
+          )}
+        >
+          {children}
+        </time>
+      </TooltipTrigger>
+      <TooltipContent side="top" align="center">{tooltipLabel}</TooltipContent>
+    </Tooltip>
+  );
+}
+
 function MessageCopyButton({ content }: { content: string }) {
   const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
@@ -307,14 +344,13 @@ export function MessageBubble({
           <TooltipProvider delayDuration={220} skipDelayDuration={80}>
             <div className="flex min-h-8 items-center justify-end gap-1.5 text-muted-foreground">
               {showCreatedAt ? (
-                <time
+                <MessageTimestamp
                   data-message-created-at
-                  dateTime={new Date(message.createdAt).toISOString()}
-                  className="text-[11px] leading-none text-muted-foreground/70 tabular-nums"
-                  title={createdAtTitle}
+                  timestamp={message.createdAt}
+                  tooltipLabel={createdAtTitle}
                 >
                   {createdAtLabel}
-                </time>
+                </MessageTimestamp>
               ) : null}
               <UserDeliveryStatus
                 status={message.deliveryStatus}
@@ -436,15 +472,14 @@ export function MessageBubble({
               </Tooltip>
             ) : null}
             {showAssistantTimestamp ? (
-              <time
+              <MessageTimestamp
                 {...(showCompletedAt ? { "data-assistant-completed-at": true } : {})}
                 data-message-timestamp
-                dateTime={new Date(assistantTimestamp).toISOString()}
-                className="text-[11px] leading-none text-muted-foreground/70 tabular-nums"
-                title={assistantTimestampTitle}
+                timestamp={assistantTimestamp}
+                tooltipLabel={assistantTimestampTitle}
               >
                 {assistantTimestampLabel}
-              </time>
+              </MessageTimestamp>
             ) : null}
             {showAutomationTrigger ? (
               <AutomationTriggerMeta