From cc0111b3cf90162799e278f907247ddbe24089bb Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 25 Aug 2026 07:52:37 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=90=20fix:=20Set=20the=20Elapsed=20Rea?=
 =?UTF-8?q?ding=20on=20the=20Column=20Its=20Neighbors=20Share=20(#15195)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The timer sat at the footer's flush left while everything around it is
inset 6px: the streaming dot pads (24 − 12) / 2 to center on the size-6
header icon's axis, and the hover-button glyphs that replace the timer
sit behind their own p-1.5. The same ps-1.5 inline-start inset lines the
reading up with the dot above it and the glyphs that follow it — measured
in the live app: timer x 382, dot x 382, first settled glyph x 382.
---
 client/src/components/Chat/Messages/Elapsed.tsx            | 7 ++++++-
 .../components/Chat/Messages/__tests__/Elapsed.spec.tsx    | 3 +++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Chat/Messages/Elapsed.tsx b/client/src/components/Chat/Messages/Elapsed.tsx
index 913f75b81b..62c330ce2b 100644
--- a/client/src/components/Chat/Messages/Elapsed.tsx
+++ b/client/src/components/Chat/Messages/Elapsed.tsx
@@ -59,8 +59,13 @@ const Elapsed = memo(function Elapsed({ index }: { index: number }) {
   }, [start]);
 
   const labels = getElapsedDurationLabels(seconds * 1000, i18n.language);
+  /** `ps-1.5` puts the reading on the column everything else in this slot
+   *  shares: the streaming dot pads the same 6px to center on the size-6
+   *  header icon's axis (see `EmptyTextPart`), and the hover-button glyphs
+   *  that replace the timer sit behind the same `p-1.5`. Inline-start, so
+   *  the alignment holds in RTL. */
   return (
-    <span className="flex items-center text-text-secondary">
+    <span className="flex items-center ps-1.5 text-text-secondary">
       <span aria-hidden="true" className="tabular-nums" data-testid="stream-elapsed">
         {localize(labels.key, labels.values)}
       </span>
diff --git a/client/src/components/Chat/Messages/__tests__/Elapsed.spec.tsx b/client/src/components/Chat/Messages/__tests__/Elapsed.spec.tsx
index dbc86e732e..15da454316 100644
--- a/client/src/components/Chat/Messages/__tests__/Elapsed.spec.tsx
+++ b/client/src/components/Chat/Messages/__tests__/Elapsed.spec.tsx
@@ -34,6 +34,9 @@ describe('Elapsed', () => {
     expect(screen.getByTestId('stream-elapsed')).toHaveTextContent(/^5s$/);
     expect(screen.getByTestId('stream-elapsed')).toHaveAttribute('aria-hidden', 'true');
     expect(screen.getByText('5 seconds elapsed')).toHaveClass('sr-only');
+    /** The 6px inline-start inset that lines the reading up with the
+     *  streaming dot and the hover-button glyphs that replace it. */
+    expect(screen.getByTestId('stream-elapsed').parentElement).toHaveClass('ps-1.5');
 
     advance(54_000);
     expect(screen.getByTestId('stream-elapsed')).toHaveTextContent(/^59s$/);