From e12c86781ada45edbb5c037b2af5772d7a3eda1f Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Thu, 8 Dec 2022 15:16:25 -0600
Subject: [PATCH] toolbar: don't wrap buttons

We can have better control over the layout and avoid wrapping by using flex.

Fixes: https://github.com/pybricks/support/issues/841
---
 src/toolbar/toolbar.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/toolbar/toolbar.scss b/src/toolbar/toolbar.scss
index 357712e3..37f9bc6b 100644
--- a/src/toolbar/toolbar.scss
+++ b/src/toolbar/toolbar.scss
@@ -9,6 +9,8 @@
 .pb-toolbar {
     padding: bp.$pt-grid-size bp.$pt-grid-size * 1.5;
     z-index: bp.$pt-z-index-content;
+    display: flex;
+    flex-wrap: nowrap;
 
     // make small buttons more square and slightly smaller (some of this is
     // done in react)
@@ -24,15 +26,11 @@
 }
 
 .pb-toolbar-group {
-    align-items: center;
-
     &.pb-align-left {
-        float: left;
         margin-right: bp.$pt-grid-size * 2;
     }
 
     &.pb-align-right {
-        float: right;
-        margin-left: bp.$pt-grid-size * 2;
+        margin-left: auto;
     }
 }