mediawiki.ui: Buttons should receive `max-width`

Applying `max-width` to mw-ui-buttons and center-aligning subgroup
when class `mw-ui-block` is available.

Bug: T95367
Change-Id: I4aaf24042f451c3b5489f49098f4b9e7eeef8098

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 4ffaeee..71febe3 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -31,8 +31,11 @@
        font-size: 1em;
        // Container layout
        display: inline-block;
+       min-width: 4em;
+       max-width: 28.75em; // equivalent to 460px, @see T95367
        padding: .5em 1em;
        margin: 0;
+       border-radius: @borderRadius;
        .box-sizing( border-box );
 
        // Disable weird iOS styling
@@ -43,15 +46,11 @@
        *display: inline;
        zoom: 1;
 
-       // Container styling
-       .button-colors( #fff, #ccc, #777 );
-       border-radius: @borderRadius;
-       min-width: 4em;
-
        // Ensure that buttons and inputs are nicely aligned when they have differing heights
        vertical-align: middle;
 
        // Content styling
+       .button-colors( #fff, @colorGray12, @colorGray7 );
        text-align: center;
        font-weight: bold;
 
@@ -112,6 +111,8 @@
        &.mw-ui-block {
                display: block;
                width: 100%;
+               margin-left: auto;
+               margin-right: auto;
        }
 
        // Progressive buttons