From 406adb14f2b58510c2893936a207f8bd20bcd323 Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Tue, 5 Jun 2018 09:19:01 +0000
Subject: [PATCH] Set mobile width cutoff to 550px

Should avoid more of the issues with unwanted appearance of mobile
layouts. Cutoff results in layout switch when sidebar becomes ~a
third of the total window width.

bug: T196213
Change-Id: I9b8baee5fe53316128f864e732c86750b4e5470e
---
 includes/SkinMonoBook.php | 2 +-
 resources/mobile-echo.js  | 2 +-
 resources/mobile-uls.js   | 2 +-
 resources/mobile.js       | 2 +-
 skin.json                 | 6 +++---
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/includes/SkinMonoBook.php b/includes/SkinMonoBook.php
index 45dcc17..347513d 100644
--- a/includes/SkinMonoBook.php
+++ b/includes/SkinMonoBook.php
@@ -84,7 +84,7 @@ class SkinMonoBook extends SkinTemplate {
 				'targets' => [ 'desktop', 'mobile' ],
 				'scripts' => [ 'resources/mobile-echo.js' ],
 				'styles' => [ 'resources/mobile-echo.less' => [
-					'media' => 'screen and (max-width: 850px)'
+					'media' => 'screen and (max-width: 550px)'
 				] ],
 				'dependencies' => [ 'ext.echo.badgeicons', 'mediawiki.util' ],
 				'messages' => [ 'monobook-notifications-link', 'monobook-notifications-link-none' ]
diff --git a/resources/mobile-echo.js b/resources/mobile-echo.js
index dbc1961..87c1207 100644
--- a/resources/mobile-echo.js
+++ b/resources/mobile-echo.js
@@ -1,6 +1,6 @@
 ( function ( mw, $ ) {
 	$( function () {
-		var mobileCutoffWidth = 850,
+		var mobileCutoffWidth = 550,
 			notificationIcons = $( '#pt-notifications-alert, #pt-notifications-notice' ),
 			echoHacked = false,
 			echoHackActive = false,
diff --git a/resources/mobile-uls.js b/resources/mobile-uls.js
index 87710f4..90bcdb1 100644
--- a/resources/mobile-uls.js
+++ b/resources/mobile-uls.js
@@ -1,5 +1,5 @@
 $( function () {
-	var mobileCutoffWidth = 850,
+	var mobileCutoffWidth = 550,
 		ULSTrigger = $( '#pt-uls' ),
 		ULSMoved = false;
 
diff --git a/resources/mobile.js b/resources/mobile.js
index ec28ab4..b9163b8 100644
--- a/resources/mobile.js
+++ b/resources/mobile.js
@@ -1,6 +1,6 @@
 ( function ( mw, $ ) {
 	$( function () {
-		var mobileCutoffWidth = 850,
+		var mobileCutoffWidth = 550,
 			// Track if DOM has been set up for mobile fanciness yet
 			monobookMobileElements = false,
 			// Toggles and targets for popouts
diff --git a/skin.json b/skin.json
index ace191b..c772cfe 100644
--- a/skin.json
+++ b/skin.json
@@ -35,10 +35,10 @@
 					"media": "screen"
 				},
 				"resources/screen-desktop.css": {
-					"media": "screen and (min-width: 851px)"
+					"media": "screen and (min-width: 551px)"
 				},
 				"resources/screen-mobile.less": {
-					"media": "screen and (max-width: 850px)"
+					"media": "screen and (max-width: 550px)"
 				}
 			}
 		},
@@ -49,7 +49,7 @@
 			],
 			"styles": {
 				"resources/mobile.js.less": {
-					"media": "screen and (max-width: 850px)"
+					"media": "screen and (max-width: 550px)"
 				}
 			},
 			"dependencies": [