From 5bf675a6b5cf4d606f463559406e1e4057b2f0be Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Mon, 13 Jul 2026 09:13:07 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9C=20style:=20Adjust=20rib=20dimensio?=
 =?UTF-8?q?ns=20and=20button=20sizes=20in=20`MessageNav`=20(#14234)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🪜 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.
---
 client/src/components/Chat/Messages/MessageNav.tsx        | 8 ++++----
 .../Chat/Messages/__tests__/MessageNav.spec.tsx           | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Chat/Messages/MessageNav.tsx b/client/src/components/Chat/Messages/MessageNav.tsx
index c5ddd4fa19..08c98839f1 100644
--- a/client/src/components/Chat/Messages/MessageNav.tsx
+++ b/client/src/components/Chat/Messages/MessageNav.tsx
@@ -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',
diff --git a/client/src/components/Chat/Messages/__tests__/MessageNav.spec.tsx b/client/src/components/Chat/Messages/__tests__/MessageNav.spec.tsx
index fbee5b0478..8211b7c793 100644
--- a/client/src/components/Chat/Messages/__tests__/MessageNav.spec.tsx
+++ b/client/src/components/Chat/Messages/__tests__/MessageNav.spec.tsx
@@ -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)', () => {