CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-10-21 01:22:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

🪜 style: Adjust rib dimensions and button sizes in MessageNav (#14234)

Browse source 
* 🪜 style: Adjust rib dimensions and button sizes in`MessageNav`

Updated the rib dimensions for RIB_END and RIB_MESSAGE to improve layout consistency. Modified the base size classes for the MessageIndicator button to ensure proper sizing and alignment. Adjusted margin for chevron button classes to enhance visual spacing.

* 🧪 test: Align MessageNav rib specs with reduced dimensions

Keep the end marker square by reducing its height alongside its width,
and update the resting rib width expectation to match the shorter ribs.
This commit is contained in:
Danny Avila 2026-07-13 09:13:07 -04:00 • committed by GitHub
parent 654c7a78b1
commit 5bf675a6b5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/components/Chat/Messages/MessageNav.tsx
View file

@ -109,8 +109,8 @@ function computeTargetScroll(
type RibDims = { baseW: number; baseH: number; peakW: number; peakH: number };
const RIB_END: RibDims = { baseW: 4, baseH: 4, peakW: 6, peakH: 6 };
const RIB_MESSAGE: RibDims = { baseW: 16, baseH: 3, peakW: 52, peakH: 6 };
const RIB_END: RibDims = { baseW: 3, baseH: 3, peakW: 4.5, peakH: 4.5 };
const RIB_MESSAGE: RibDims = { baseW: 12, baseH: 3, peakW: 39, peakH: 6 };
/** Vertical falloff radius (content-space px) over which neighbouring ribs magnify. */
const MAG_INFLUENCE = 50;
@ -150,7 +150,7 @@ const MessageIndicator = memo(function MessageIndicator({
label: string;
onSelect: (id: string) => void;
}) {
const baseSize = entry.isEnd ? 'mr-1.5 h-1 w-1' : 'h-[3px] w-4';
const baseSize = entry.isEnd ? 'mr-1.5 h-[3px] w-[3px]' : 'h-[3px] w-3';
return (
<button
type="button"
@ -175,7 +175,7 @@ const MessageIndicator = memo(function MessageIndicator({
});
const chevronButtonClasses = cn(
'-mr-0.5 rounded-md p-0.5 text-text-tertiary opacity-40 transition-[color,opacity] duration-300',
'-mr-1 rounded-md p-0.5 text-text-tertiary opacity-40 transition-[color,opacity] duration-300',
'group-hover/nav:text-text-secondary group-hover/nav:opacity-100',
'group-focus-within/nav:text-text-secondary group-focus-within/nav:opacity-100',
'group-hover/nav:hover:text-text-primary',

4
client/src/components/Chat/Messages/__tests__/MessageNav.spec.tsx
View file

@ -300,8 +300,8 @@ describe('MessageNav', () => {
const [userInd, assistantInd] = container.querySelectorAll('[data-msg-id]');
const userLine = userInd.querySelector('span');
const assistantLine = assistantInd.querySelector('span');
expect(userLine?.className).toContain('w-4');
expect(assistantLine?.className).toContain('w-4');
expect(userLine?.className).toContain('w-3');
expect(assistantLine?.className).toContain('w-3');
});
it('lights up only the in-viewport ribs at rest (no hover)', () => {