Skip to content

fix(ui-breadcrumb): keep descenders from being clipped in Breadcrumb.Link - #2791

Open
matyasf wants to merge 1 commit into
masterfrom
fix/INSTUI-5250-breadcrumb-clipping
Open

matyasf wants to merge 1 commit into
masterfrom
fix/INSTUI-5250-breadcrumb-clipping

Conversation

@matyasf

@matyasf matyasf commented Nov 11, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

  • Set line-height: 1.5 on the Breadcrumb.Link text span. The standalone Link line-height equals the font size, and the span's overflow: hidden (used for the CSS ellipsis) clipped descenders. This restores the 24px link height from v11.6.

Test Plan

  • Open the Breadcrumb docs page and check that letters like "g", "p" and "y" render fully in the small, medium and large sizes.

Fixes INSTUI-5250

🤖 Generated with Claude Code

…Link

The standalone Link variant has a line-height equal to its font size. Since the text moved from
TruncateText into a span with overflow hidden (for the CSS ellipsis), that span clipped the bottom
of letters like "g" and "y". The text span now sets its own 1.5 line-height, which restores the
24px link height.

INSTUI-5250

Co-Authored-By: Claude <noreply@anthropic.com>
@matyasf matyasf self-assigned this Nov 11, 2026
@matyasf
matyasf requested a review from balzss November 11, 2026 16:18
@github-actions

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.2

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2791/

Built to branch gh-pages at 2026-11-11 16:18 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@github-actions

Copy link
Copy Markdown
Contributor

Visual regression report

Cypress suite: ✅ Passing

Visual diff: ⚠️ Changes detected.

Status Count
Unchanged 104
Changed 7
New 0
Removed 0

Accessibility (axe): ✅ No violations.

📊 View full report — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches.

Diff images (7)

breadcrumb-canvas.png — 9073 pixels differ

breadcrumb-dark.png — 12266 pixels differ

breadcrumb-light.png — 12167 pixels differ

imagecard-light.png — 10211 pixels differ

tooltip-canvas.png — 339 pixels differ

tooltip-dark.png — 399 pixels differ

tooltip-light.png — 382 pixels differ

Baselines come from the visual-baselines branch. They refresh on every merge to master. The Cypress suite line covers the a11y and console-error assertions — a ❌ there means the suite found real issues even if the visual diff is clean.

github-actions Bot pushed a commit that referenced this pull request Nov 11, 2026
@matyasf
matyasf requested a review from HerrTopi November 12, 2026 09:52

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant