CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-08-28 12:44:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

💄 style: Align the Overflow Menu's Icons and Ease the Assistant Header (#14888)

Browse source 
`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.
This commit is contained in:
Danny Avila 2026-08-16 08:30:35 -04:00 • committed by GitHub
parent e7fa54dacf
commit a23ab9d16e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/Chat/Menus/HeaderMenu.tsx
View file

@ -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,
});

3
client/src/components/Chat/Messages/ui/MessageRow.tsx
View file

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

4
client/src/hooks/Chat/useExportShare.tsx
View file

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