Make WordPress Core

Opened 22 months ago

Last modified 3 months ago

#58837 new defect (bug)

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

Reported by: mikinc860's profile mikinc860 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 4.9
Component: General Keywords: has-patch changes-requested
Focuses: ui, css Cc:

Description

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

Attachments (2)

Screenshot 2023-07-18 151346.jpg (58.0 KB) - added by mikinc860 22 months ago.
58837.diff (429 bytes) - added by mikinc860 22 months ago.
Here the minus margin and padding was causing so I have changed width from 100% to calc(100% - 11px)

Download all attachments as: .zip

Change History (7)

@mikinc860
22 months ago

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

#1 @mikinc860
22 months ago

  • Keywords has-patch added

#2 @dhruvishah2203
22 months ago

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

Actual Result

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

Last edited 22 months ago by dhruvishah2203 (previous) (diff)

#3 @huzaifaalmesbah
22 months ago

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.

#4 @mikinc860
3 months ago

@audrasjb Could you share your feedback?

#5 @sabernhardt
3 months ago

  • Keywords changes-requested added
  • Version changed from 6.3 to 4.9

[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.

Last edited 3 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.