Make WordPress Core

Opened 5 weeks ago

Closed 4 weeks ago

#65233 closed defect (bug) (fixed)

Taxonomy: Delete button is misaligned

Reported by: wildworks's profile wildworks Owned by: wildworks's profile wildworks
Milestone: 7.0 Priority: normal
Severity: normal Version:
Component: General Keywords: good-first-bug has-patch dev-reviewed
Focuses: ui, administration Cc:

Description

This is likely due to the button height being standardized to 40px in version 7.0. I propose we take this opportunity to refactor the two buttons using a flex layout. The current approach of using line-height for alignment is unstable.

Steps to reproduce

  1. Access Posts > Tags
  2. Create a tag.
  3. Edit the tag.
  4. Check the Alignment of the delete button.

Attachments (1)

delete-button-alignment.png (23.8 KB) - added by wildworks 5 weeks ago.
Comparison of the delete button's position between 6.9 and 7.0

Download all attachments as: .zip

Change History (17)

@wildworks
5 weeks ago

Comparison of the delete button's position between 6.9 and 7.0

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


5 weeks ago
#1

  • Keywords has-patch added

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

This PR fixes the alignment of delete button after the standardization of 40px in buttons.

More details are on the issue but a before and after is below:

Before After
https://github.com/user-attachments/assets/ba0c660e-95bf-4002-9c54-e15b81eba593

## Use of AI Tools

AI assistance: Yes
Tool(s): Github Copilot
Model: Claude Haiku 4.5
Used for: finding where the css for delete link and tags are present, the css addition and removal is done and reviewed by me

#2 @tusharbharti
5 weeks ago

Seems like the PR description rendering broke 😅

https://i.ibb.co/j9kPRXYP/image.png

@tusharbharti commented on PR #11823:


5 weeks ago
#3

This is reproducible from my end, when following the steps provided in the issue.

https://github.com/user-attachments/assets/c5f8cfe5-3367-4435-a39c-6c0457cd52ef

@tusharbharti commented on PR #11823:


5 weeks ago
#4

Hi, and yeah, I also think migrating to a full flex layout seems like the right choice since many files are now using display: flex, based on the grep.

I wasn’t sure how much of this was allowed in this case, so I added flex to the .edit-tag-actions.

I will check whether fully migrating to a flex layout breaks anything before I commit this.

@tusharbharti commented on PR #11823:


5 weeks ago
#5

and just to confirm, I also need to update the -rtl.css files?
cc: @t-hamano

@tusharbharti commented on PR #11823:


5 weeks ago
#6

The diff is working, and I also checked other places just in case, so I’m committing this.

https://github.com/user-attachments/assets/8d44d543-8e65-40a2-b7f0-8fd4dace447d

#7 @mukesh27
5 weeks ago

  • Keywords commit added

Mark ready for commit.

@tusharbharti commented on PR #11823:


5 weeks ago
#8

and just to confirm, I also need to update the -rtl.css files?

Found the grunt cmd for this 👍🏻

#9 @wildworks
5 weeks ago

  • Owner set to wildworks
  • Resolution set to fixed
  • Status changed from new to closed

In 62357:

Taxonomy: Fix delete button alignment on Edit Tag screen.

The delete button on the Edit Tag screen was misaligned after the form control updates in [61645]. Switch the action buttons row to a flexbox layout for stable alignment.

Follow-up to [61645].

Props mukesh27, tusharbharti, wildworks.
Fixes #65233.

#10 @wildworks
5 weeks ago

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

Reopening #65233 to request backporting [62357] to the 7.0 branch

#11 @tusharbharti
5 weeks ago

Hi @wildworks, Just to confirm, should I open a backport PR for 7.0, or will the maintainers handle it?

#12 @wildworks
5 weeks ago

@tusharbharti, you don't need to create a backport PR. Another committer will approve the commit to the trunk branch and then commit it to 7.0.

#14 @manhar
5 weeks ago

Tested the fix from [62357] on WordPress 7.0 RC3. The Delete link aligns correctly with the Update button after applying the patch. The flexbox approach is clean and low-risk. +1 for backporting to the 7.0 branch.

#15 @peterwilsoncc
4 weeks ago

  • Keywords dev-reviewed added; dev-feedback removed

[62357] approved for merge to the 7.0 branch.

#16 @peterwilsoncc
4 weeks ago

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

In 62375:

Taxonomy: Fix delete button alignment on Edit Tag screen.

The delete button on the Edit Tag screen was misaligned after the form control updates in [61645]. Switch the action buttons row to a flexbox layout for stable alignment.

Follow-up to [61645].

Reviewed by peterwilsoncc.
Merges r62357 to the 7.0 branch.

Props mukesh27, tusharbharti, wildworks.
Fixes #65233.

Note: See TracTickets for help on using tickets.