Horizontal Scroll Issue in theme/plugin Editor Page File Navigation Section

[mikinc860]

The bug pertains to the horizontal scroll behavior of the file navigation section on the theme/plugin editor page when the display width is below 780 pixels.

Expected Behavior:
The file navigation section should adapt its layout and display the necessary elements within the available width, without requiring horizontal scrolling.

Current Behavior:
When the display width falls below 780 pixels, the file navigation section in the theme/plugin editor page fails to adjust its layout properly. As a result, some elements within the file navigation section extend beyond the visible area, causing a horizontal scroll to appear.

Steps to Reproduce:

1. Open the theme/plugin editor page.
2. Reduce the width of the display to below 780 pixels.
3. Navigate to the file navigation section on the editor page.

Video Link: ​https://www.awesomescreenshot.com/video/19213200?key=de8384bcde8ae4bd0a80d87836612609

[mikinc860]

Here the minus margin and padding was causing so I have changed width from 100% to calc(100% - 11px)

[dhruvishah2203]

Test Report

Environment

• 12th Gen Intel(R) Core(TM) i5-1240P 1.70 GHz
• Chrome 114.0.5735.199
• Server: nginx/1.25.0
• PHP: 8.2.0
• WordPress: 6.3-beta4-56216-src
• WordPress trunk: 6.4-alpha-56267-src
• Theme: Twenty Twenty-Three

Steps

• Go to the admin dashboard
• click on plugin/theme editor from the tool menu
• checked the file navigation section

Expected Result

After clicking on the theme/plugin editor file navigation section should not scroll on responsive devices
The patch working fine for me.

Supplemental Artifacts

• Image-1 : ​https://www.awesomescreenshot.com/image/41598839?key=3e4647839700e6c4c8769f6595750820

Actual Result

In the file navigation section horizontal scroll does not appear and it looks fine to me.
The patch working fine for me.

[huzaifaalmesbah]

Test Report

---

I am in agree with this patch. The code provided by @mikinc860 works perfectly fine. horizontal scroll issue solved after patch.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58837/58837.diff

@media screen and (max-width: 782px) {
	.wrap #templateside li:not(.howto) > a:first-of-type span.notice {
		width: calc(100% - 11px);
	}
}

Environment
OS: Macos m1 2020
Web Server: nginx/1.25.0
PHP: 8.1.21
WordPress: 6.4-alpha-56267
Browser: Chrome 115.0.5790.98
Theme: Twenty Twenty-One
Active Plugins: No plugins activated.

[mikinc860]

@audrasjb Could you share your feedback?

[sabernhardt]

[41999] added width: 100% to the .notice.

I do not think you need to exclude .howto list items for this style rule. The .howto class is for a ​child theme's reference to its parent. This has a link, but the link would not contain a .notice span. I think you can just update the ​existing width value. If :not(.howto) is necessary, then the new ruleset could still be moved inside the existing 782px media query (immediately after width: 100%).

Additional note: if the .notice switches to box-sizing: border-box, the width would need to add 10 pixels instead of subtracting 11.