Improve layout of ExpiryInputWidget on mobile

Bug: T208271
Change-Id: If3f9c417cd2fad98165b8a2eaef9a05673ce5b4d

diff --git a/resources/src/mediawiki.widgets/mw.widgets.ExpiryInputWidget.less b/resources/src/mediawiki.widgets/mw.widgets.ExpiryInputWidget.less
index cd0cbd7..b3c25fa 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.ExpiryInputWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.ExpiryInputWidget.less
@@ -1,8 +1,12 @@
+// TODO: Redefined here to avoid importing variables.less;
+@width-breakpoint-desktop: 1000px;
+
 @wm-expirywidget-text-width: 43.3em;
 
 .mw-widget-ExpiryWidget.mw-widget-ExpiryWidget-hasDatePicker {
        .oo-ui-buttonSelectWidget {
-               float: left;
+               display: inline-block;
+               vertical-align: top;
        }
 
        .oo-ui-textInputWidget.mw-widget-ExpiryWidget-relative {
@@ -10,7 +14,16 @@
                max-width: @wm-expirywidget-text-width;
        }
 
+       .mw-widget-selectWithInputWidget {
+               display: inline;
+       }
+
+       .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-dropdownInputWidget {
+               display: inline-block;
+       }
+
        .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-textInputWidget {
+               display: inline-block;
                max-width: 22.8em;
        }
 
@@ -23,4 +36,18 @@
                        max-height: 2.286em;
                }
        }
+
+       @media ( max-width: ( @width-breakpoint-desktop - 1px ) ) {
+               .mw-widget-selectWithInputWidget {
+                       display: block;
+               }
+
+               .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-dropdownInputWidget,
+               .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-textInputWidget,
+               .mw-widgets-datetime-dateTimeInputWidget {
+                       display: block;
+                       max-width: 50em;
+                       margin-top: 0.5em;
+               }
+       }
 }