[admin-reskin] Remove floats from custom links section in the Nav Menus screen

[audrasjb]

With the admin reskin, there are some issues on the custom links section of the nav menu screen in some Locales. See screenshots below for the fr_FR locale.

I suggest to simply remove the existing float css properties to avoid such issues.

[audrasjb]

Current situation on fr_FR locale

[audrasjb]

After removing floats

https://core.trac.wordpress.org/ticket/64692

[huzaifaalmesbah]

I tested it with Belarusian (Беларуская мова) and saw the same issue. After applying the ​PR #10997 , the issue was fixed.

However, Maybe it would look better if we use:

.menu-item-textbox {
    width: 100%;
}

Since the label and the textbox are currently on separate rows.

Before Apply Patch	After Apply Patch ✅

[audrasjb]

Replying to huzaifaalmesbah:

However, Maybe it would look better if we use:

.menu-item-textbox {
    width: 100%;
}

Since the label and the textbox are currently on separate rows.

Right, let's do that. PR updated.

[audrasjb]

Updated PR with width 100%

I believe that if we set the input box width to 100%, we may also need to adjust the button alignment, as it does not appear to be properly aligned at the moment. It should support alignment options such as right, center, or left, as appropriate.

Just sharing my thoughts.

Currently, it appears as shown here: ​https://prnt.sc/GRIgTITSt3Zr

Thanks for the comments! If anyone is able to rebuild a PR for this, it would be really appreciated because I'm not sure I have time to update this one in time before RC1

[khushi1501]

Tested this on WordPress 7.0 Beta 5 and the patch works as expected.

The layout in the Custom Links section looks better after removing floats. I’m also in favor of adjusting the button alignment, as it improves the overall consistency of the UI.

Before applying the patch:-
​https://prnt.sc/gZZ_JZ8RlCfI

After applying the patch:-
​https://prnt.sc/F-0He1AnD-hk

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

## Use of AI Tools

[ozgursar]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11273
with language Afrikaans

Environment

• WordPress: 7.0-beta5-61991-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
• Browser: Opera
• OS: macOS
• Theme: Twenty Fifteen 4.1
• MU Plugins: None activated
• Plugins:
  • Code Snippets 3.9.5
  • Test Reports 1.2.1

Steps taken

1. Choose a locale
2. View Menus > Appearance and extend Custom Links
3. Observe layout bug due to floats
4. Apply patch
5. Observe labels properly located above the input fields and their width set to 100%
6. ✅ Patch is solving the problem

Screenshots/Screencast with results

Before

After

Looks good to me ✅

English	Français

This looks all good to me. Also tested on small screen and with fr_FR locale.

[audrasjb]

In 62097:

Menus: Remove floats from custom links section in the Nav Menus screen.

With the new admin design, there were some issues with floating elements in the custom links section of the classic Menu screen. This changeset simplifies the CSS implementation by removing floats and wp-clearfix classes from some elements in favor of a more robust implementation based on flex positionning.

Props audrasjb, huzaifaalmesbah, shailu25, nikunj8866, joedolson, khushi1501, ozgursar.
Fixes #64692.
See #64308.