Compare commits

...

3 Commits

Author SHA1 Message Date
Zeno Kapitein 795de24087 Merge branch 'main' into claude/tender-allen-983m45 2026-07-20 12:20:29 +02:00
Claude 129574e287 changeset
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NoCD2XcvbHVpwBkFfJTVx3
2026-07-17 00:13:13 +00:00
Claude 791c25adb0 Fix vertical centering of icon in breadcrumb items
Breadcrumb items are laid out inline (so they wrap naturally), and the
page icon rendered inside them is an inline SVG sized in em units. With
the default `vertical-align: baseline`, the icon sits on the text
baseline and appears vertically off-center next to the crumb label. The
`items-center` class on the link had no effect since the link is inline,
not a flex container.

Add `align-middle` to the icon so it centers against the text, matching
how inline icons are aligned elsewhere in the app.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NoCD2XcvbHVpwBkFfJTVx3
2026-07-17 00:13:09 +00:00
2 changed files with 9 additions and 1 deletions
@@ -0,0 +1,5 @@
---
"gitbook": patch
---
Vertically center the icon in breadcrumb items with the breadcrumb text on published sites.
@@ -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}
</>