Plugin Update Message slightly moved out of place

[Presskopp]

Is it only me or is the text shown a bit too low in the plugin update messages?

[sabernhardt]

icon is aligned to the bottom instead of top

[sabernhardt]

This seems to relate to the vertical alignment of the icon. Toggling vertical-align:bottom off so it falls back to top—within the browser—fixes it at some screen widths and has no effect at other widths (not changing at CSS breakpoints).

[Presskopp]

Replying to sabernhardt:

This seems to relate to the vertical alignment of the icon. Toggling vertical-align:bottom off so it falls back to top—within the browser—fixes it at some screen widths and has no effect at other widths (not changing at CSS breakpoints).

To me deleting the vertical-align:bottom looks like the solution for any screen size.

[costdev]

This looks like a good-first-bug candidate.

The file in question: ​src/wp-admin/css/common.css (Line ~1577)

vertical-align: bottom; should be removed from here and instead added with just the .import-php .updating-message:before selector, unless the icon is misaligned in that element too.

[eherman24]

Remove bottom vertical alignment from .wrap .notice p:before

[eherman24]

I've added a patch here with the following changes, which seems to resolve the alignment issue at all browser widths.

Changes were made to src ​https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-admin/css/common.css#L1577 as outlined by @costdev

.wrap .notice p:before,
.import-php .updating-message:before {
	margin-right: 6px;
        vertical-align: bottom;
}

to

.wrap .notice p:before,
.import-php .updating-message:before {
	margin-right: 6px;
}

.import-php .updating-message:before {
	vertical-align: bottom;
}

[costdev]

Test Report

Patch tested: 56123.diff

Steps to Reproduce/Test

1. Install an old version of a plugin.
2. Navigate to Appearance > Plugins.
3. 🐞 The icon and text in the update notice are not aligned with each other.
4. Apply 56123.diff.
5. Run npm run build:dev.
6. Navigate to Appearance > Plugins. Perform a hard refresh.
7. 🎉 The icon and text in the update notice are aligned with each other.

Environment

• Server: Apache (Linux)
• WordPress: 6.1-alpha-53344-src
• Browser: Chrome 103.0.0.0
• OS: Windows 10
• Theme: Twenty Twenty-Two
• Language: LTR - English (US) and RTL - Arabic
• Plugins: None activated.

Actual Results

• 🐞 The icon and text are not aligned with each other.
• 🎉 The icon and text are aligned with each other.
• ✅ Issue resolved with patch.

Notes

• This appears to have existed since the update notices were added in 5.0. Changing Version to 5.0.
• I attempted to check if .import-php .updating-message::before had the same issue, but can't seem to find any core reference to import-php except in the CSS file mentioned in this ticket.
• Marking for commit consideration.

[costdev]

Nice work @eherman24! The patch tested well for me.

[audrasjb]

Alright, self-assigning for commit.

[audrasjb]

In 53717:

Upgrade/Install: Improve plugin update icon alignment.

This changeset improves the vertical alignment of the plugin update button in the Plugins screen.

Props Presskopp, sabernhardt, costdev, eherman24.
Fixes #56123.