[2.x] fix: statistics date range dropdown clipped by the entity columns - #4950
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #4949
Changes proposed in this pull request:
The Statistics period dropdown opens into a clipped box, so the menu is invisible behind the graph.
It isn't a z-index problem.
.Dropdown-menualready hasz-index: var(--zindex-dropdown)(1030), well above anything the chart sets — the menu is being clipped, not painted under. The clipper isoverflow: autoon.StatisticsWidget-entities, added in #3940 to let the entity columns scroll horizontally on narrow screens. The period dropdown lives in the labels column inside that same container, andalign-items: flex-endputs the labels flush with the container's bottom edge, so the menu'stop: 100%lands entirely outside the clip box. No z-index value can escape that, which is why the reporter found changing it had no effect.overflow-x: auto; overflow-y: visibleisn't an out either — per spec, if one axis is notvisible, the other computes toauto.The scroll was only ever meant for the entity columns, so this moves it there: the columns get a
.StatisticsWidget-entityListwrapper that ownsoverflow: auto(plusflex: 1; min-width: 0so it still shrinks and scrolls), leaving the labels column and its dropdown outside any clipping context..StatisticsWidget-entitieskeeps its flex row and the 10px gap before the first column. Applied to bothStatisticsWidgetandMiniStatisticsWidget, which share the class names.Second, unrelated to the clipping but visible on the same control:
.Button--textsetstext-decoration: underlineon hover, which makes a dropdown toggle read as a link. That variant exists for link-like buttons (the login/signup modal actions), but it's also what core's own admin dropdowns use —SettingDropdownandPermissionDropdownboth hardcodebuttonClassName = 'Button Button--text', so all three underline. Suppressed for.Dropdown-toggleonly; the link-like uses keep their underline.Impacted:
extensions/statistics/less/admin.less,extensions/statistics/js/src/admin/components/{StatisticsWidget,MiniStatisticsWidget}.tsx,framework/core/less/common/Button.less.Reviewers should focus on:
min-width: 0on the wrapper. Without it the flex item won't shrink below its content width and the scroll never engages — that's the line carrying fix: overflowing forum stats #3940, and it's the thing to check on a narrow viewport.Button.lesschange reaches beyond statistics. It also affectsSettingDropdownandPermissionDropdownin core admin.Screenshot
Necessity
overflow: autooutright reverts fix: overflowing forum stats #3940;Dropdown-menu--toponly moves the clipping to the top edge.Button--textrule is core's and affects two core dropdowns besides this one.Confirmed