Skip to content

[DevTools] Fix alignment of breadcrumbs separator#541

Closed
everettbu wants to merge 1 commit into
mainfrom
sebbie/02-18-_devtools_fix_alignment_of_breadcrumbs_separator
Closed

[DevTools] Fix alignment of breadcrumbs separator#541
everettbu wants to merge 1 commit into
mainfrom
sebbie/02-18-_devtools_fix_alignment_of_breadcrumbs_separator

Conversation

@everettbu

Copy link
Copy Markdown

Mirror of facebook/react#35817
Original author: eps1lon


Summary

The separator vertical alignment felt slightly off. Now we're aligning separators and items by their baseline which looks more pleasent.

How did you test this change?

Before:
CleanShot 2026-02-18 at 10 08 59`@2x`
After:

CleanShot 2026-02-18 at 10 09 07`@2x`

@everettbu everettbu added CLA Signed React Core Team Opened by a member of the React Core Team labels Feb 18, 2026
@greptile-apps

greptile-apps Bot commented Feb 18, 2026

Copy link
Copy Markdown

Greptile Summary

Fixes the vertical alignment of » breadcrumb separators in two DevTools views (OwnersStack and SuspenseBreadcrumbs) by adding align-items: baseline to their flex containers. This ensures separator characters align with the text baseline of adjacent breadcrumb items rather than being slightly offset.

  • Adds align-items: baseline to .OwnerStackFlatListContainer in OwnersStack.css
  • Adds align-items: baseline to .SuspenseBreadcrumbsList in SuspenseBreadcrumbs.css
  • No functional or logical issues found; both changes are minimal and correct CSS adjustments

Confidence Score: 5/5

  • This PR is safe to merge — it adds a single CSS property to two files with no risk of breakage.
  • The change is a minimal, well-scoped CSS-only fix that adds align-items: baseline to two flex containers. Both usages are correct and achieve the intended visual alignment improvement. No functional code is modified, and there is no risk of regression.
  • No files require special attention.

Important Files Changed

Filename Overview
packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css Adds align-items: baseline to .OwnerStackFlatListContainer to fix vertical alignment of » breadcrumb separators with element names. Clean, correct CSS change.
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css Adds align-items: baseline to .SuspenseBreadcrumbsList to fix vertical alignment of » breadcrumb separators with button text. Clean, correct CSS change.

Last reviewed commit: 2b7573b

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

@everettbu

Copy link
Copy Markdown
Author

Upstream PR was closed or merged. Code is synced via branch mirror.

@everettbu everettbu closed this Feb 18, 2026
@everettbu
everettbu deleted the sebbie/02-18-_devtools_fix_alignment_of_breadcrumbs_separator branch February 18, 2026 19:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants