Merge pull request #8553 from ckeditor/i/5586

Fix (ui): A toolbar with grouped items should wrap to keep items visible in the viewport. Closes #5586 .
ckeditor · Dec 1, 2020 · 65bc73d · 65bc73d
2 parents 8b16046 + c1d2fe0
commit 65bc73d
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css b/packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css
@@ -3,14 +3,20 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+:root {
+	--ck-toolbar-dropdown-max-width: 60vw;
+}
+
 .ck.ck-toolbar-dropdown {
-	& .ck.ck-toolbar .ck.ck-toolbar__items {
-		flex-wrap: nowrap;
-	}
+	& .ck-dropdown__panel {
+		/* https://github.com/ckeditor/ckeditor5/issues/5586 */
+		width: max-content;
+		max-width: var(--ck-toolbar-dropdown-max-width);
 
-	& .ck-dropdown__panel .ck-button {
-		&:focus {
-			z-index: calc(var(--ck-z-default) + 1);
+		& .ck-button {
+			&:focus {
+				z-index: calc(var(--ck-z-default) + 1);
+			}
 		}
 	}
 }