explorer: fix toolbar buttons wrapping

This fixes the toolbar buttons wrapping when the text overflows.

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"

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;
+        }
+    }
 }