Skip to content

[lexical-playground] Bug Fix: Stabilize text format dropdown width in toolbar #7462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Apr 14, 2025
Merged

[lexical-playground] Bug Fix: Stabilize text format dropdown width in toolbar #7462

merged 1 commit into from
Apr 14, 2025

Conversation

kirandash
Copy link
Contributor

@kirandash kirandash commented Apr 12, 2025 •
edited
Loading

Description

Current behavior:

  • The text format dropdown button width changes dynamically based on the selected format text (e.g., "Normal", "Heading 1")
  • This causes other toolbar buttons to shift position when switching formats
  • Creates a jarring visual experience and poor UX

Changes made:

  • Added fixed width (7em) to dropdown button text
  • Added text overflow handling with ellipsis for longer format names
  • Ensured proper text alignment and spacing
  • Fixed visual disruption when switching between text formats

Closes #7461

Test plan

Before

lexical-bug-7461.mov

After

lexical-fix-dropdown.mov

The changes can be tested by:

  1. Opening the Lexical playground preview for this PR
  2. Clicking on the text format dropdown (shows "Normal" by default)
  3. Selecting "Heading 1" from the dropdown
  4. Switching back to "Normal"
  5. Verifying that toolbar buttons maintain stable positions
  6. Checking that longer format names are properly truncated with ellipsis

@kirandash
fix(toolbar): stabilize text format dropdown width
75e8c9e 
- Add fixed width (7em) to dropdown button text
- Add text overflow handling with ellipsis
- Ensure proper text alignment and spacing
- Fix visual disruption when switching between text formats

Fixes facebook#7461
@vercel Vercel
Copy link

vercel bot commented Apr 12, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
lexical ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 12, 2025 1:30pm
lexical-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 12, 2025 1:30pm

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 12, 2025
@takuyakanbr takuyakanbr added this pull request to the merge queue Apr 14, 2025
@takuyakanbr takuyakanbr mentioned this pull request Apr 14, 2025
Draft
Merged via the queue into facebook:main with commit fd52dd1 Apr 14, 2025
40 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@takuyakanbr takuyakanbr takuyakanbr approved these changes

@zurfyx zurfyx Awaiting requested review from zurfyx zurfyx is a code owner

@fantactuka fantactuka Awaiting requested review from fantactuka fantactuka is a code owner

@acywatson acywatson Awaiting requested review from acywatson acywatson is a code owner

@Fetz Fetz Awaiting requested review from Fetz Fetz is a code owner

@ivailop7 ivailop7 Awaiting requested review from ivailop7 ivailop7 is a code owner

@Sahejkm Sahejkm Awaiting requested review from Sahejkm Sahejkm is a code owner

@potatowagon potatowagon Awaiting requested review from potatowagon potatowagon is a code owner

@lilshady lilshady Awaiting requested review from lilshady lilshady is a code owner

Assignees
No one assigned
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Bug: Fix toolbar button jumping when switching text formats in dropdown
3 participants
@kirandash @takuyakanbr @facebook-github-bot