From 25eceeb60e9d0e0059d40d64dc5d721a5319dffa Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 21 Jul 2026 00:10:27 +0000
Subject: [PATCH] Fix off-center icon in breadcrumb (RND-12092)

The breadcrumb crumb is laid out inline, so the icon rendered next to the
label defaulted to vertical-align: baseline and its square box sat on the
text baseline, appearing shifted up. Align it to the middle of the text,
matching how inline icons/images are aligned elsewhere.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QSEiRkE1nPdYDJjWwZBmys
---
 .../src/components/PageBody/BreadcrumbItemDropdown.tsx       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/gitbook/src/components/PageBody/BreadcrumbItemDropdown.tsx b/packages/gitbook/src/components/PageBody/BreadcrumbItemDropdown.tsx
index 16f36d107..263bf349c 100644
--- a/packages/gitbook/src/components/PageBody/BreadcrumbItemDropdown.tsx
+++ b/packages/gitbook/src/components/PageBody/BreadcrumbItemDropdown.tsx
@@ -47,7 +47,10 @@ export function BreadcrumbItemDropdown(props: {
     const content = (
         <>
             {emoji || icon ? (
-                <PageIcon page={{ emoji, icon }} style="mr-1 inline size-[1em] shrink-0" />
+                <PageIcon
+                    page={{ emoji, icon }}
+                    style="mr-1 inline size-[1em] shrink-0 align-middle"
+                />
             ) : null}
             {label}
         </>