WordPress/gutenberg

Dropdown active option indicator misaligned

Open

#52001 opened on Jun 28, 2023

View on GitHub
 (7 comments) (1 reaction) (0 assignees)JavaScript (9,607 stars) (3,893 forks)batch import
Good First IssueMobile App - i.e. Android or iOS[Priority] Low[Type] Regression

Description

Description

The indicator for the currently selected option within a dropdown menu is misaligned.

This appears to have been introduced in the 22.5 release via https://github.com/WordPress/gutenberg/pull/50665 or https://github.com/WordPress/gutenberg/pull/50907.

Step-by-step reproduction instructions

  1. Add a Heading block1.
  2. Tap the "Change level" button (an H2 icon) to open the heading level dropdown menu.

Expected behaviour

The check mark indicating the selected option is flush to the right.

Actual behaviour

The check mark indicating the selected option is slightly to the right of center.

Screenshots or screen recording (optional)

Correct (22.4) Incorrect (22.5)
alignment-correct alignment-incorrect

WordPress information

  • WordPress version: 6.2.2
  • Gutenberg version: 16.0.0
  • Are all plugins except Gutenberg deactivated? Yes
  • Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

  • Device: iPhone 13 mini
  • Operating system: iOS 16.5.1
  • WordPress app version: 22.5

Footnotes

  1. Reproducing via heading level may not be possible due to https://github.com/WordPress/gutenberg/issues/51996, but this can be reproduced via block or text alignment dropdown menus as well. ↩

Contributor guide

Tech stack
javascriptreactcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic CSSfamiliarity with Gutenberg components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Investigate the regression introduced in PR #50665 or #50907. The dropdown menu's active option indicator (checkmark) is misaligned to the right of center. Look at the CSS changes in those PRs, particularly any modifications to dropdown item alignment or icon positioning. Check the component files in packages/components/src/dropdown/ or similar. Test on a mobile device to reproduce the exact misalignment shown in the screenshots.