From 012d6b029eb68452bc3ced7bc5f40d7f29c9d1cd Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Tue, 31 May 2022 12:51:55 -0500
Subject: [PATCH] explorer: fix toolbar buttons wrapping

This fixes the toolbar buttons wrapping when the text overflows.
---
 src/explorer/Explorer.tsx  |  7 +++++--
 src/explorer/explorer.scss | 22 +++++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/explorer/Explorer.tsx b/src/explorer/Explorer.tsx
index 3690394d..d6f8af3a 100644
--- a/src/explorer/Explorer.tsx
+++ b/src/explorer/Explorer.tsx
@@ -111,10 +111,13 @@ const FileActionButtonGroup: React.VoidFunctionComponent<ActionButtonGroupProps>
     return (
         <ButtonGroup
             aria-hidden={true}
-            className="pb-explorer-file-action-button-group"
+            className="pb-explorer-file-tree-action-button-group"
             minimal={true}
         >
-            <Toolbar firstFocusableItemId={duplicateButtonId}>
+            <Toolbar
+                className="pb-explorer-file-tree-action-toolbar"
+                firstFocusableItemId={duplicateButtonId}
+            >
                 <ActionButton
                     id={renameButtonId}
                     icon="edit"
diff --git a/src/explorer/explorer.scss b/src/explorer/explorer.scss
index c4aa3694..538c6fac 100644
--- a/src/explorer/explorer.scss
+++ b/src/explorer/explorer.scss
@@ -3,14 +3,26 @@
 
 @use '@blueprintjs/core/lib/scss/variables' as bp;
 
-// reveal file action buttons on hover
-.#{bp.$ns}-tree-node-content:not(:hover) .pb-explorer-file-action-button-group {
-    display: none;
-}
-
 .pb-explorer {
     &-header-toolbar {
         display: flex;
         justify-content: flex-end;
     }
+
+    &-file-tree {
+        // don't need extra padding around toolbar
+        & .#{bp.$ns}-tree-node-secondary-label {
+            padding: unset;
+        }
+
+        // reveal file action toolbar on hover
+        .#{bp.$ns}-tree-node-content:not(:hover) &-action-button-group {
+            display: none;
+        }
+
+        // fix layout since we are nesting toolbar in button group
+        &-action-toolbar {
+            display: inline-flex;
+        }
+    }
 }