Make WordPress Core

Opened 5 weeks ago

Closed 3 weeks ago

#65062 closed defect (bug) (fixed)

Revisions: buttons are misplaced

Reported by: wildworks's profile wildworks Owned by: joedolson's profile joedolson
Milestone: 7.0 Priority: normal
Severity: normal Version:
Component: Revisions Keywords: admin-reskin has-patch has-test-info dev-reviewed
Focuses: Cc:

Description

Related to #64547

We changed the default size of most buttons from 30px to 40px. As a result, the space below the "Previous", "Next", and "Restore This Revision" buttons disappeared on the classic revision screen.

Attachments (1)

revisions-ui.png (68.4 KB) - added by wildworks 5 weeks ago.

Download all attachments as: .zip

Change History (16)

This ticket was mentioned in PR #11549 on WordPress/wordpress-develop by @wildworks.


5 weeks ago
#1

  • Keywords has-patch added

Trac ticket: #65062

## Use of AI Tools

None

## Screenshots

Width This PR WordPress 6.9
1200px https://github.com/user-attachments/assets/4a445b77-6659-4c52-85b4-3480e95b0c18 https://github.com/user-attachments/assets/9b51576c-6dd5-46ad-a857-c7498bcb595e
700px https://github.com/user-attachments/assets/e3c6c861-d133-4651-b5e7-285b66c30c9b https://github.com/user-attachments/assets/f14c409f-4465-422f-bec7-e784ef0aa0ca

| 360px | https://github.com/user-attachments/assets/a47ea728-34e0-404c-b9df-754d0c251352| https://github.com/user-attachments/assets/d5d33511-ec60-44f9-9607-cdf3dbe85fbc |

###

#2 @joedolson
5 weeks ago

  • Owner set to joedolson
  • Status changed from new to accepted

#4 @wildworks
5 weeks ago

#64930 was marked as a duplicate.

This ticket was mentioned in Slack in #core-test by gaisma22. View the logs.


5 weeks ago

#6 @mokshasharmila13
4 weeks ago

  • Keywords has-test-info added

Patch Testing Report

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

## Environment

  • WordPress: 7.1-alpha (latest)
  • PHP: 8.2
  • Browser: Chrome
  • OS: macOS
  • Theme: Twenty Twenty-Five
  • Plugins: None activated

## Testing Steps

  • Opened a post/page in WordPress admin
  • Navigated to the Revisions screen
  • Checked the layout in desktop, tablet, and mobile screen sizes
  • Applied the patch and repeated the same steps

## Results

  • The Previous and Next buttons alignment looks improved
  • Layout appears consistent across different screen sizes
  • Restore button is displayed correctly
  • No functional issues observed

The patch is working as expected.

On smaller mobile screens, the buttons still appear slightly small, which could be improved further in future updates, but overall the current patch resolves the main alignment issue.

Tested across multiple screen sizes and everything is working fine.

This ticket was mentioned in Slack in #core-test by moksha_shah. View the logs.


4 weeks ago

@shailu25 commented on PR #11549:


4 weeks ago
#8

Revision button alignment issue is fixed with this PR.✅

BeforeAfter
https://github.com/user-attachments/assets/537dc60e-40d7-4752-9ee0-e99ab17076c6https://github.com/user-attachments/assets/74aa90c7-1c2e-4c40-a0a3-54138ca89bd8

@peterwilsoncc commented on PR #11549:


3 weeks ago
#9

The spacing at the bottom of the restore this revision button seems a little off still with this PR.

Viewing the button on a desktop, the margin above the button is noticeably larger than the margin below the button.

https://github.com/user-attachments/assets/bd366c4d-6c7a-46e9-906e-46819114c9cc

Oddly, on a mobile view the reverse appears to be true.

https://github.com/user-attachments/assets/1aa1cace-37f4-48c0-a2b3-d3aef8ae233d

@wildworks commented on PR #11549:


3 weeks ago
#10

@peterwilsoncc

Viewing the button on a desktop, the margin above the button is noticeably larger than the margin below the button.

It might be due to CSS caching. Can you try a hard refresh of your browser?

https://github.com/user-attachments/assets/2faba7f7-83fc-480b-ab42-9b8c3d15f6cb

Oddly, on a mobile view the reverse appears to be true.

The bottom margin in the mobile view was not addressed in this PR as it was already present. Screenshot from 6.9:

https://github.com/user-attachments/assets/90457866-5d0e-4ed2-806a-d34f430efb03

@peterwilsoncc commented on PR #11549:


3 weeks ago
#11

It might be due to CSS caching. Can you try a hard refresh of your browser?

Sorry Aki, it was that or something else PEBKAC.

This is good for commit.

#12 @wildworks
3 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 62273:

Revisions: Fix misplaced buttons in comparison UI.

Align the Previous, Next, and Restore This Revision buttons consistently across viewports on the revisions comparison screen.

Props audrasjb, mokshasharmila13, peterwilsoncc, presskopp, shailu25, wildworks.
Fixes #65062.

#13 @wildworks
3 weeks ago

  • Keywords dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening #65062 to request backporting [62273] to 7.0 branch

#15 @peterwilsoncc
3 weeks ago

  • Keywords dev-reviewed added; dev-feedback removed

r62273 approved for merge to the 7.0 branch.

#16 @wildworks
3 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 62280:

Revisions: Fix misplaced buttons in comparison UI.

Align the Previous, Next, and Restore This Revision buttons consistently across viewports on the revisions comparison screen.

Reviewed by peterwilsoncc.
Merges [62273] to the 7.0 branch.

Props audrasjb, mokshasharmila13, peterwilsoncc, presskopp, shailu25, wildworks.
Fixes #65062.

Note: See TracTickets for help on using tickets.