CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-10-24 03:09:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

📐 fix: Set the Elapsed Reading on the Column Its Neighbors Share (#15195)

Browse source 
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.
This commit is contained in:
Danny Avila 2026-08-25 07:52:37 -04:00 • committed by GitHub
parent 862ebf3235
commit cc0111b3cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

7
client/src/components/Chat/Messages/Elapsed.tsx
View file

@ -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>

3
client/src/components/Chat/Messages/__tests__/Elapsed.spec.tsx
View file

@ -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$/);