Make WordPress Core

Opened 11 months ago

Last modified 11 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: 6.3
Component: General Keywords: has-patch
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 11 months ago.
58837.diff (429 bytes) - added by mikinc860 11 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 (5)

@mikinc860
11 months ago

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

#1 @mikinc860
11 months ago

  • Keywords has-patch added

#2 @dhruvishah2203
11 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

Expected Result

After click on the theme/plugin editor file navigation section should not scroll in 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.

Version 1, edited 11 months ago by dhruvishah2203 (previous) (next) (diff)

#3 @huzaifaalmesbah
11 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.

Note: See TracTickets for help on using tickets.