Merge "Add explanatory comment to unexpected line of code"

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.ui.FilterTagMultiselectWidget.less

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
index c4b5015..e5240a4 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@ -44,13 +44,17 @@
                }
 
                &.oo-ui-tagMultiselectWidget-outlined {
+                       // per T177206#4271707 we avoid keeping the collapsed element to take the whole width of the screen
+                       // we are providing enough cues (keeping the labels) for it to be clear that the panel gets compacted
+                       // to the left and the user not to feel lost with the transition.
                        width: unset;
                        max-width: 100%;
                }
 
                // Hide inner elements
                .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters,
-               .mw-rcfilters-ui-filterTagMultiselectWidget-views {
+               .mw-rcfilters-ui-filterTagMultiselectWidget-views,
+               .mw-rcfilters-ui-filterTagMultiselectWidget-views-input {
                        display: none;
                }
        }
@@ -78,6 +82,7 @@
                                padding: 0.6em 0; // Same top padding as the handle
                                flex: 0 0 auto;
                        }
+
                        &-queryName {
                                flex: 1 1 auto;
                                padding: 0.6em 0; // Same top padding as the handle
@@ -127,21 +132,19 @@
                }
 
                &-select {
-                       width: 1em;
-
                        &-widget.oo-ui-widget {
+                               display: block;
+                               .box-sizing( border-box );
+                               height: 2.5em;
                                border: 1px solid @colorGray10;
                                border-left-width: 0;
                                border-radius: 0 0 @borderRadius 0;
-                               // Using the 'left' value from
+                               // For `padding-right` using the 'left' value from
                                // .oo-ui-buttonElement-frameless.oo-ui-iconElement >
                                // .oo-ui-buttonElement-button > .oo-ui-iconElement-icon
                                padding-right: 0.35714286em;
-
-                               display: block;
                                text-align: right;
-                               height: 2.5em;
-                               .box-sizing( border-box );
+                               white-space: nowrap;
 
                                .oo-ui-buttonOptionWidget:first-child {
                                        margin-left: 0;