Improve the top section of Special:Watchlist for small screens

Bug: T225127#5518870
Change-Id: I2d3e2cf27150487190b34cc9b76db9905599e27b

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index dff7881..9559d3a 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -181,6 +181,18 @@
        font-weight: bold;
 }
 
+// on smaller screen, set .watchlistDetail to full width
+// so that the spinner doesn't appear beside it. T225127#5518870
+@media screen and ( max-width: @width-breakpoint-tablet ) {
+       .client-js {
+               /* stylelint-disable-next-line selector-class-pattern */
+               .watchlistDetails {
+                       float: none;
+                       width: auto;
+               }
+       }
+}
+
 @-webkit-keyframes rcfiltersBouncedelay {
        // 50% equals 800ms
        0%,

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
index 52f7ff2..75da5dd 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
@@ -31,3 +31,19 @@
                border-top: 2px solid @colorGray14;
        }
 }
+
+// On small screens, remove the table properties from the
+// top section. T225127#5518870
+@media screen and ( max-width: @width-breakpoint-tablet ) {
+       .mw-rcfilters-ui-watchlistTopSectionWidget {
+               .mw-rcfilters-ui-table,
+               .mw-rcfilters-ui-row,
+               .mw-rcfilters-ui-cell {
+                       display: block;
+               }
+
+               &-editWatchlistButton {
+                       margin-top: 1em;
+               }
+       }
+}