Install theme button icon is misaligned with button text during theme installation

[kosvrouvas]

On the WordPress Theme Install page, when the Install button is clicked, the loading/status icon is not properly aligned with the button text during the installation process.

Steps to Reproduce:

Navigate to Appearance → Themes → Add New.
Select any theme that is not currently installed.
Click the Install button.
Observe the button while the theme is being installed.

Expected Result:
The icon remains correctly aligned with the button text throughout the installation process.

Actual Result:
The icon appears misaligned relative to the button text while the installation is in progress.

[r1k0]

Hello @kosvrouvas,

I wasn't able to observe the misalignment on my end. Could you share a screenshot of the issue?

I also tried applying the changes suggested, and most of them got overwritten.

[kosvrouvas]

Hello, it is when installing from the preview

[r1k0]

Replying to kosvrouvas:

Hello, it is when installing from the preview

Ooh, I see my mistake. My bad.
I was able to reproduce it.

Reproduction Report

Environment

• WordPress: 7.1-alpha-62161-src
• Subdirectory: No
• PHP: 8.3.31
• Server: nginx/1.31.1
• Database: mysqli (Server: 8.4.9 / Client: mysqlnd 8.3.31)
• Browser: Chrome 150.0.0.0
• OS: Linux
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.0

Steps taken

1. Navigate to Appearance → Themes → Add New.
2. Select any theme that is not currently installed.
3. Click the Install button.
4. Observe the button while the theme is being installed.
5. 🐞 Bug occurs

Expected behavior

• The install icon should be correctly aligned vertically relative to the text "install/ing".

Additional Notes

• None

Screenshots/Screencast with results

• Screenshot showcasing the problem or the bug not occurring.

[eishanoor]

Before patch: loading icon and “Installing…” text are misaligned.

[eishanoor]

After patch: loading icon and “Installing…” text are correctly aligned.

[eishanoor]

Manual Test Report

I manually tested the proposed patch for ticket #65601.

Test Environment

• WordPress: 7.0.1
• Environment: Laragon
• Operating system: Windows
• Browser: Google Chrome

Test Method

I tested the issue from:

Appearance → Themes → Add New Theme → Details & Preview → Install

Before applying the patch, the loading icon and the “Installing…” text were not properly aligned in the theme preview install button.

I then manually applied the changes from the patch to wp-admin/css/common.css, refreshed the page, and repeated the same steps.

Result

After applying the patch, the loading icon and the “Installing…” text were properly aligned in the preview install button.

I also confirmed that the theme installation completed successfully and did not notice any regression during this workflow.

Patch works as expected.

[vedantere]

Before Patch

[vedantere]

Adter Patch

[vedantere]

Manual Test Report

I manually tested the proposed patch (wordpress.patch) for ticket #65601.

Test Environment

• WordPress: 7.1-beta2-62791-src
• Setup: local wp-env (Docker), no plugins
• PHP: 8.3.31
• Browser: Chrome, macOS

Test Method

Appearance → Themes → Add New → click a not-yet-installed theme card to open Details & Preview → Install.

Before applying the patch, the loading icon in the overlay's "Installing…" button sat noticeably above the text baseline instead of centered with it.

I then applied the one-line change from the patch to src/wp-admin/css/common.css (.button.updating-message:before etc., changing line-height: 1.9 to line-height: 1.5), refreshed, and repeated the same steps.

Result

After applying the patch, the icon and the "Installing…" text share a baseline in the preview overlay's Install button. No regressions observed on the Add Plugins card buttons or the plugin-info modal footer buttons, which use their own more specific alignment rules and are unaffected by this change.

Patch works as expected. This corroborates eishanoor's manual test report (comment:7).

(Before/after screenshots attached.)

[mosescursor]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/65601/wordpress.patch

Environment

• WordPress: 7.0.2
• Subdirectory: No
• PHP: 8.3.32
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 150.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.0

Steps taken

✅ Patch is solving the problem

[ugyensupport]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/65601/wordpress.patch

Environment

• WordPress: 7.0.3-alpha-62793
• Subdirectory: No
• PHP: 8.4.14
• Server: nginx/1.21.4
• Database: mysqli (Server: 5.7.44-log / Client: mysqlnd 8.4.14)
• Browser: Chrome 150.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.0
  • WordPress Beta Tester 4.0.0

Steps taken

Appearance → Themes → Add New → click a not-yet-installed theme card to open Details & Preview → Install.

Before applying the patch, the loading icon in the overlay's "Installing…" button sat noticeably above the text baseline instead of centered with it.

I then applied the one-line change from the patch to src/wp-admin/css/common.css (.button.updating-message:before etc., changing line-height: 1.9 to line-height: 1.5), refreshed, and repeated the same steps
✅ Patch is solving the problem

Expected result

• The icon remains correctly aligned with the button text throughout the installation process.

Actual result

The icon appears misaligned relative to the button text while the installation is in progress.

Patch is solving the problem ✅

[wildworks]

While wordpress.patch does indeed solve the problem, I don't believe it's the correct approach.

line-height: 1.5; /* 38px (20px * 1.5) - matches button */

This calculation is incorrect. The button is expected to be 40px by default to align with the new design system, and 38px here is the value to match that default size. Changing the line-height here would affect the logic of the entire design system.

Alternatives to wordpress.patch

This PR adopts a more restrictive approach.

Trac ticket: https://core.trac.wordpress.org/ticket/65601

Before	After

## Use of AI Tools

None

[shailu25]

Test Report

This Report Validates that the indicated patch address the issue.✅

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/12799

Environment:

WordPress - 7.1-beta4-20260801.113528
OS - Windows
Browser - Chrome
PHP - 8.2
Plugin - None

Actual Results:

• Issue Resolved with Patch. ✅

Supplemental Artifacts

• Attached

[shailu25]

Before Patch

[shailu25]

After Patch

[wildworks]

In 62972:

Administration: Fix install button icon alignment in theme preview.

When installing a theme from the Details & Preview overlay, the animated icon shown in the Install button was taller than the button itself, so the button grew and its label shifted while the install was in progress. Matching the icon height to the button height keeps the button at a stable size and the icon aligned with the label throughout the updating and updated states.

Developed in: ​https://github.com/WordPress/wordpress-develop/pull/12799

Follow-up to [62516].

Props eishanoor, kosvrouvas, mosescursor, r1k0, shailu25, ugyensupport, vedantere, wildworks.
Fixes #65601.

[mosescursor]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/12799

Environment

• WordPress: 7.1-beta4-20260801.113528
• Subdirectory: No
• PHP: 8.3.32
• Server: PHP.wasm
• Database: WP_MySQL_On_SQLite (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 150.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.0

This Report Validates that the indicated patch address the issue.✅
Tested the patch in Playground and it solves the issue better than the first patch