elementor / elementor/elementor

🐞 Bug Report: If too narrow, the Editor Widget Panel controls that are inline can overlap causing a bad UX

Open
#21,822 2 comments 0 reactions 0 assignees View on GitHub
bug editor mod* mod/b* type/layout type/styles
Dominant language
PHP
Stars
7.1k
Forks
1.6k
Avg merge
1d 5h
Merged PRs (30d)
193

Description

### Prerequisites

- [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [X] The issue still exists against the latest stable version of Elementor.

### Description

When having two panels (editor and navigator) sticky on the side and narrow to preserve space the container controls are too squished together when they are inline. I think having them wrap would be much better just like the Justify Content controls are.

![3-3-2023_rdNKElv29l](https://user-images.githubusercontent.com/21226901/228621169-ef4ce532-6872-44ef-b48c-828da9033ce4.jpeg)

### Steps to reproduce

1. Go to edit with Elementor
2. Dock navigator on the right side
3. Narrow the panels as much as they allow

### Isolating the problem

- [X] This bug happens with only Elementor plugin active (and Elementor Pro).
- [X] This bug happens with a Blank WordPress theme active ([Hello theme](https://wordpress.org/themes/hello-elementor/)).
- [X] I can reproduce this bug consistently following the steps above.

### System Info

System Info

````txt


== Server Environment ==
Operating System: Linux
Software: Apache
MySQL version: Percona Server (GPL), Release '43', Revision 'c1b94a6cfd7' v5.7.40-43
PHP Version: 7.4.33.2
PHP Memory Limit: 512M
PHP Max Input Vars: 10000
PHP Max Post Size: 100M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 6.1.1
WP Multisite: No
Max Upload Size: 50 MB
Memory limit: 40M
Max Memory limit: 512M
Permalink Structure: /%postname%/
Language: en-US
Timezone: America/New_York
Debug Mode: Inactive

== Theme ==
Name: Hello Elementor Child
Version: 1.0.0
Author: Elementor Team
Child Theme: Yes
Parent Theme Name: Hello Elementor
Parent Theme Version: 2.7.1
Parent Theme Author: Elementor Team

== User ==
Role: administrator
WP Profile lang: en_US
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

== Active Plugins ==
Anti-Spam by CleanTalk
Version: 6.6
Author: СleanTalk

Classic Editor
Version: 1.6.2
Author: WordPress Contributors

Easy Notification Bar
Version: 1.4.5
Author: WPExplorer

Elementor
Version: 3.11.5
Author: Elementor.com

Elementor Pro
Version: 3.11.7
Author: Elementor.com

Enable Media Replace
Version: 4.1.0
Author: ShortPixel

Gravity Forms
Version: 2.7.3
Author: Gravity Forms

Header Footer Code Manager
Version: 1.1.32
Author: 99robots

Image Map Pro
Version: 5.6.9
Author: Webcraft Plugins Ltd.

JetElements For Elementor
Version: 2.6.9
Author: Crocoblock

JetEngine
Version: 3.1.3.1
Author: Crocoblock

PublishPress Future
Version: 2.9.2
Author: PublishPress

Sticky Header Effects for Elementor
Version: 1.6.3
Author: Rwattner

The Plus Addons for Elementor
Version: 5.1.16
Author: POSIMYTH

The Plus Addons for Elementor - Pro
Version: 5.1.6
Author: POSIMYTH

Yoast Duplicate Post
Version: 4.5
Author: Enrico Battocchi & Team Yoast

Yoast SEO
Version: 20.4
Author: Team Yoast

== Must-Use Plugins ==
Force Strong Passwords - WPE Edition
Version: 1.8.0
Author: Jason Cosper

WP Engine Cache Plugin
Version: 1.1.2
Author: WP Engine

WP Engine Seamless Login Plugin
Version: 1.6.0
Author: WP Engine

WP Engine Security Auditor
Version: 1.0.10
Author: wpengine

WP Engine System
Version: 5.0.1
Author: WP Engine

== Elements Usage ==

archive : 2
archive-posts : 2
heading : 2
search-form : 2
wp-widget-archives : 2
wp-widget-categories : 2
footer : 2
divider : 4
heading : 1
icon-list : 8
nav-menu : 4
social-icons : 2
tp-gravityt-form : 1
header : 2
icon : 1
nav-menu : 1
theme-site-logo : 2
tp-off-canvas : 1
page : 5
button : 17
divider : 16
heading : 29
image : 24
jet-headline : 3
posts : 1
text-editor : 31
popup : 8
button : 1
divider : 1
heading : 1
icon-list : 5
image : 3
jet-headline : 5
social-icons : 1
text-editor : 3
theme-site-logo : 1
tp-gravityt-form : 2
tp-image-factory : 1
tp-navigation-menu : 1
section : 6
button : 1
divider : 2
heading : 2
icon-list : 2
jet-headline : 1
posts : 1
social-icons : 1
text-editor : 10
tp-navigation-menu : 1
single : 2
divider : 3
gallery : 1
heading : 2
jet-headline : 1
post-info : 1
search-form : 1
share-buttons : 1
text-editor : 1
theme-post-content : 1
theme-post-featured-image : 1
theme-post-title : 1
video : 1
widget : 0
heading : 3
tp-gravityt-form : 1
wp-post : 0
text-editor : 1
video : 1
wp-page : 22
accordion : 1
button : 41
divider : 34
gallery : 2
google_maps : 1
heading : 88
icon-list : 14
image : 28
image-carousel : 4
image-gallery : 2
jet-headline : 12
menu-anchor : 15
posts : 2
price-list : 6
search-form : 1
template : 1
text-editor : 77
video : 1
wp-widget-archives : 1
wp-widget-categories : 1
landing-page : 0
button : 13
divider : 29
gallery : 8
heading : 39
image : 15
price-list : 5
text-editor : 40
tp-gravityt-form : 5
video : 1

== Settings ==

cpt_support: page, e-landing-page, jet-engine
disable_color_schemes: yes
disable_typography_schemes: yes
allow_tracking: yes
unfiltered_files_upload: 1
load_fa4_shim: yes

== Features ==
Custom Fonts: 0
Custom Icons: 0

== Integrations ==

== Elementor Experiments ==
Optimized DOM Output: Inactive by default
Improved Asset Loading: Active
Improved CSS Loading: Inactive by default
Inline Font Icons: Inactive by default
Accessibility Improvements: Inactive by default
Additional Custom Breakpoints: Inactive by default
admin_menu_rearrangement: Inactive by default
Flexbox Container: Inactive by default
Upgrade Swiper Library: Inactive by default
Default to New Theme Builder: Inactive
Hello Theme Header & Footer: Inactive
Editor V2: Inactive by default
Landing Pages: Active
Nested Elements: Inactive by default
Lazy Load Background Images: Inactive by default
Save as Default: Active by default
Page Transitions: Inactive
Notes: Inactive
Loop: Active by default
Form Submissions: Inactive
Scroll Snap: Inactive
Mega Menu: Inactive by default

== Log ==

Log: showing 20 of 372023-02-22 12:00:01 [info] Elementor Pro/Upgrades - _on_each_version Start
2023-02-22 12:00:01 [info] Elementor Pro/Upgrades - _on_each_version Finished
2023-02-22 12:00:01 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.9.2',
'to' => '3.11.1',
)]
2023-02-22 12:00:01 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.9.2',
'to' => '3.11.1',
)]
2023-02-22 12:00:01 [info] elementor::elementor_updater Started
2023-02-22 12:00:01 [info] Elementor/Upgrades - _on_each_version Start
2023-02-22 12:00:01 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.9.2',
'to' => '3.11.1',
)]
2023-02-22 12:00:02 [info] Elementor/Upgrades - _on_each_version Finished
2023-02-22 12:00:02 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.9.2',
'to' => '3.11.1',
)]
2023-03-27 18:22:38 [info] elementor-pro::elementor_pro_updater Started
2023-03-27 18:22:39 [info] Elementor Pro/Upgrades - _on_each_version Start
2023-03-27 18:22:39 [info] Elementor Pro/Upgrades - _on_each_version Finished
2023-03-27 18:22:39 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.1',
'to' => '3.11.7',
)]
2023-03-27 18:22:39 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.1',
'to' => '3.11.7',
)]
2023-03-27 18:22:39 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.11.1',
'to' => '3.11.5',
)]
2023-03-27 18:22:39 [info] elementor::elementor_updater Started
2023-03-27 18:22:39 [info] Elementor/Upgrades - _on_each_version Start
2023-03-27 18:22:39 [info] elementor-pro::elementor_pro_updater Started
2023-03-27 18:22:40 [info] Elementor/Upgrades - _on_each_version Finished
2023-03-27 18:22:40 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.11.1',
'to' => '3.11.5',
)]

== Elementor - Compatibility Tag ==

Elementor Pro: Compatibility not specified
JetElements For Elementor: Compatibility not specified
Sticky Header Effects for Elementor: Compatibility not specified
The Plus Addons for Elementor: Compatibility not specified
The Plus Addons for Elementor - Pro: Compatibility not specified

== Elementor Pro - Compatibility Tag ==

````

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.