From 2328f9ecec327325665dbc0e283290eeceea67bb Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Mon, 16 Oct 2017 11:59:09 +0200
Subject: [PATCH] Make the toolbar stack on mobile

---
 editor/block-toolbar/style.scss | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/editor/block-toolbar/style.scss b/editor/block-toolbar/style.scss
index 3f39c07a829fe..6ac19cac2fab3 100644
--- a/editor/block-toolbar/style.scss
+++ b/editor/block-toolbar/style.scss
@@ -7,6 +7,29 @@
 		border: none;
 		border-left: 1px solid $light-gray-500;
 	}
+
+	// this should probably have its own class
+	> div:not( .editor-block-toolbar__mobile-tools ) {
+		display: flex;
+	}
+
+	// stacked toolbar
+	position: absolute;
+	top: $header-height;
+	left: 0;
+	right: 0;
+	background: $white;
+	border-bottom: 1px solid $light-gray-500;
+
+	// merge toolbars after this breakpoint
+	@include break-large {	// we should try and lower this breakpoint through an ellipsis overflow feature
+		padding-left: $item-spacing;
+		position: static;
+		left: auto;
+		right: auto;
+		background: none;
+		border-bottom: none;
+	}
 }
 
 .editor-block-toolbar .editor-block-switcher {