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: |
|
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:
- Open the theme/plugin editor page.
- Reduce the width of the display to below 780 pixels.
- Navigate to the file navigation section on the editor page.
Video Link: https://www.awesomescreenshot.com/video/19213200?key=de8384bcde8ae4bd0a80d87836612609
Attachments (2)
Change History (7)
#2
@
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.
#3
@
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.
#5
@
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.
Here the minus margin and padding was causing so I have changed width from 100% to calc(100% - 11px)