From 820d612eaff26caffd3745f63ce3b9359136a04a Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 17 May 2024 19:38:42 -0400
Subject: [PATCH] =?UTF-8?q?feat(VisualEditor):=20=E2=9C=A8=20hide=20less?=
 =?UTF-8?q?=20useful=20buttons=20when=20width=20is=20limited?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VisualEditor/ext.visualEditor.core.less   | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/skinStyles/extensions/VisualEditor/ext.visualEditor.core.less b/skinStyles/extensions/VisualEditor/ext.visualEditor.core.less
index ffdbc8fca..44f2062ff 100644
--- a/skinStyles/extensions/VisualEditor/ext.visualEditor.core.less
+++ b/skinStyles/extensions/VisualEditor/ext.visualEditor.core.less
@@ -367,10 +367,15 @@
 /* Responsive handling */
 .ve-init-mw-desktopArticleTarget-toolbar {
 	> .oo-ui-toolbar-bar {
-		> .oo-ui-toolbar-tools:first-child {
-			display: inline-block;
-			max-width: ~'calc( 100% - 250px )';
-			white-space: nowrap;
+		> .oo-ui-toolbar-tools {
+			// Needed to hide overflow tools
+			background: var( --color-surface-0 );
+
+			&:first-child {
+				display: inline-block;
+				max-width: ~'calc( 100% - 250px )';
+				white-space: nowrap;
+			}
 		}
 
 		> .oo-ui-toolbar-actions {
@@ -395,3 +400,14 @@
 		}
 	}
 }
+
+/* Hide less useful buttons on small viewport */
+@media ( max-width: @max-width-breakpoint-tablet ) {
+	.ve-ui-toolbar-group {
+		&-format,
+		&-style,
+		&-help {
+			display: none;
+		}
+	}
+}