Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.38k stars 1.97k forks source link

Atomic: file-editor-warning buttons misaligned #90177

Open cuemarie opened 2 months ago

cuemarie commented 2 months ago

Quick summary

The "Go Back" and "I Understand" buttons included in the file-editor-warning when navigating to Theme File Editor or Plugin File Editor are misaligned.

Steps to reproduce

  1. Open a new Atomic Site
  2. Navigate to /wp-admin/plugin-editor.php or /wp-admin/theme-editor.php for the first time

What you expected to happen

The pop up's buttons to be aligned

What actually happened

The buttons are misaligned. It looks like the "I understand" dismiss button has a specific vertical alignment (baseline) that's not applying to the first button:

.wp-core-ui p .button {
  vertical-align: baseline;
}

CleanShot 2024-05-01 at 13 12 16@2x

Impact

All

Available workarounds?

There is no user impact

Platform (Simple and/or Atomic)

Atomic

Logs or notes

No response

liviopv commented 2 months ago

📌 REPRODUCTION RESULTS

📌 FINDINGS/SCREENSHOTS/VIDEO Plugin editor CleanShot 2024-05-02 at 11 28 43@2x

theme editor

CleanShot 2024-05-02 at 11 29 25@2x

local site CleanShot 2024-05-02 at 11 30 50@2x

📌 ACTIONS

@mrfoxtalbot could this be a side-effect of UCNR? Maybe a component changed and affected the button alignment?

mrfoxtalbot commented 2 months ago

I do not know but @Automattic/explorers might be able to confirm.

allilevine commented 2 months ago

I do not know but @Automattic/explorers might be able to confirm.

This pre-dates the project but we should fix it. I added it to the project board.

davemart-in commented 2 weeks ago

Added to Explorers team board. Removed from Untangled.