Merge "Fix 'Tags' padding to keep it farther from the edge and document the source...

diff --combined resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
index 7721275,46e7c99..284d338
--- 1/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
--- 2/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@@ -17,37 -17,11 +17,37 @@@
                border-bottom: 0;
                background-color: @colorGray15;
                border-radius: 2px 2px 0 0;
 -              padding: 0.6em;
 +              padding: 0 0.6em 0.6em 0.6em;
                margin-top: 1em;
                line-height: normal;
        }
  
 +      .mw-rcfilters-collapsed & {
 +              // Taking from the handle, since border-bottom is set on the
 +              // filters view which is hidden when collapsed
 +              border-bottom: 1px solid @colorGray10;
 +
 +              &.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
 +                      padding-bottom: 0;
 +                      padding-top: 0;
 +              }
 +
 +              .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow {
 +                      border-left: 1px solid @colorGray10;
 +              }
 +
 +              &.oo-ui-tagMultiselectWidget-outlined {
 +                      width: unset;
 +                      max-width: 100%;
 +              }
 +
 +              // Hide inner elements
 +              .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters,
 +              .mw-rcfilters-ui-filterTagMultiselectWidget-views {
 +                      display: none;
 +              }
 +      }
 +
        .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
                .transition( background-color 500ms ease-out );
        }
@@@ -56,60 -30,26 +56,60 @@@
                background-color: @background-color-primary;
        }
  
 +      &-hideshowButton.oo-ui-buttonElement > .oo-ui-buttonElement-button {
 +              // Override the OOUI default for buttons
 +              font-weight: normal;
 +      }
 +
        &-wrapper {
 -              .mw-rcfilters-ui-table {
 -                      margin-top: 0.3em;
 +              &-top {
 +                      display: flex;
 +                      flex-wrap: nowrap;
 +                      justify-content: space-between;
 +
 +                      &-title {
 +                              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
 +                              white-space: nowrap;
 +                              min-width: 0; // This has to be here to enable the text truncation
 +                              overflow: hidden;
 +                              text-overflow: ellipsis;
 +                      }
 +
 +                      &-hideshow {
 +                              flex: 0 0 auto;
 +                              margin-left: 0.5em;
 +                              padding-left: 0.5em;
 +                      }
                }
  
                &-content {
                        &-title {
                                font-weight: bold;
                                color: @colorGray5;
 +                              white-space: nowrap;
                        }
  
                        &-savedQueryTitle {
                                color: @colorGray2;
 +                              padding-left: 1em;
                                font-weight: bold;
                                vertical-align: top;
 -                              margin-left: 1em;
 -                              width: ~'calc( 100% - 10em )';
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
 +                              // This is necessary for Firefox to be able to
 +                              // truncate the text. Without this rule, the label
 +                              // is treated as if it's full-width, and while it is
 +                              // being truncated with the overflow:hidden,
 +                              // the ellipses isn't showing properly.
 +                              // This rule seems to convince Firefox to re-render,
 +                              // fix the label's width properly, and add the ellipses
 +                              max-width: 100%;
                        }
                }
        }
@@@ -126,6 -66,10 +126,10 @@@
                                border: 1px solid @colorGray10;
                                border-left-width: 0;
                                border-radius: 0 0 @borderRadius 0;
+                               // 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;