feat(VisualEditor): ✨ hide less useful buttons when width is limited

StarCitizenTools · May 17, 2024 · 820d612 · 820d612
1 parent cae19d7
commit 820d612
Showing 1 changed file with 20 additions and 4 deletions.
diff --git 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;
+		}
+	}
+}