From a23ab9d16edddf14ffb9aeb7b3aad28ceb099bd4 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Sun, 16 Aug 2026 08:30:35 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20Align=20the=20Overflow?=
 =?UTF-8?q?=20Menu's=20Icons=20and=20Ease=20the=20Assistant=20Header=20(#1?=
 =?UTF-8?q?4888)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`DropdownPopup` already wraps every item icon in `mr-2 size-4`, but the
header menu's icons carried `icon-md mr-2` of their own — so the margin was
applied twice and an 18px icon sat in a 16px box, leaving the column ragged
between items whose icons happened to render at different intrinsic sizes.
The icons now match the box they are given and let the wrapper own spacing.

Separately, the assistant name sat directly on the first line of its own
response. A small bottom margin separates the two without opening a gap.
---
 client/src/components/Chat/Menus/HeaderMenu.tsx       | 10 +++++-----
 client/src/components/Chat/Messages/ui/MessageRow.tsx |  3 ++-
 client/src/hooks/Chat/useExportShare.tsx              |  4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Chat/Menus/HeaderMenu.tsx b/client/src/components/Chat/Menus/HeaderMenu.tsx
index 340c16f972..6e7b324838 100644
--- a/client/src/components/Chat/Menus/HeaderMenu.tsx
+++ b/client/src/components/Chat/Menus/HeaderMenu.tsx
@@ -70,9 +70,9 @@ export default function HeaderMenu({
       id: 'header-bookmarks',
       label: localize('com_ui_bookmarks'),
       icon: bookmarks.hasBookmarks ? (
-        <BookmarkFilledIcon className="icon-md mr-2 text-text-secondary" />
+        <BookmarkFilledIcon className="size-4 text-text-secondary" />
       ) : (
-        <BookmarkIcon className="icon-md mr-2 text-text-secondary" />
+        <BookmarkIcon className="size-4 text-text-secondary" />
       ),
       subItems: bookmarks.items,
     });
@@ -82,7 +82,7 @@ export default function HeaderMenu({
     items.push({
       id: 'header-compare',
       label: localize('com_ui_add_multi_conversation'),
-      icon: <PlusCircle className="icon-md mr-2 text-text-secondary" />,
+      icon: <PlusCircle className="size-4 text-text-secondary" />,
       onClick: multiConvo.addConversation,
     });
   }
@@ -98,9 +98,9 @@ export default function HeaderMenu({
       ariaChecked: temporary.isTemporary,
       className: temporary.isTemporary ? 'bg-surface-active' : undefined,
       icon: temporary.isTemporary ? (
-        <Check className="icon-md mr-2 text-text-primary" />
+        <Check className="size-4 text-text-primary" />
       ) : (
-        <MessageCircleDashed className="icon-md mr-2 text-text-secondary" />
+        <MessageCircleDashed className="size-4 text-text-secondary" />
       ),
       onClick: temporary.toggle,
     });
diff --git a/client/src/components/Chat/Messages/ui/MessageRow.tsx b/client/src/components/Chat/Messages/ui/MessageRow.tsx
index ad7d8ee1d2..ffa20b37da 100644
--- a/client/src/components/Chat/Messages/ui/MessageRow.tsx
+++ b/client/src/components/Chat/Messages/ui/MessageRow.tsx
@@ -77,7 +77,8 @@ export default function MessageRow({
               <MessageTimestamp value={timestamp} />
             </h2>
           ) : (
-            <h2 className="flex min-h-7 w-full select-none items-center gap-2 text-sm font-semibold text-text-primary">
+            /** `mb-1` keeps the name off its own first line of body text. */
+            <h2 className="mb-1 flex min-h-7 w-full select-none items-center gap-2 text-sm font-semibold text-text-primary">
               <span
                 aria-hidden="true"
                 className="flex size-6 flex-shrink-0 items-center justify-center overflow-hidden rounded-full"
diff --git a/client/src/hooks/Chat/useExportShare.tsx b/client/src/hooks/Chat/useExportShare.tsx
index c419c66f2d..e511e1d40c 100644
--- a/client/src/hooks/Chat/useExportShare.tsx
+++ b/client/src/hooks/Chat/useExportShare.tsx
@@ -56,7 +56,7 @@ export default function useExportShare({
     {
       label: localize('com_ui_share'),
       onClick: () => setShowShareDialog(true),
-      icon: <Share2 className="icon-md mr-2 text-text-secondary" />,
+      icon: <Share2 className="size-4 text-text-secondary" />,
       show: isSharedButtonEnabled && canCreateSharedLinks,
       /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
       hideOnClick: false,
@@ -66,7 +66,7 @@ export default function useExportShare({
     {
       label: localize('com_endpoint_export'),
       onClick: () => setShowExports(true),
-      icon: <Upload className="icon-md mr-2 text-text-secondary" />,
+      icon: <Upload className="size-4 text-text-secondary" />,
       /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
       hideOnClick: false,
       ref: exportButtonRef,