Merge pull request #21497 from overleaf/rd-file-tree-line-break

[web] The file tree toolbar should not wrap onto two lines at small width

GitOrigin-RevId: ff2d3037b5f389ba104850d6674e0bc3a50867ee

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -24,6 +24,10 @@
     .toolbar-alt-mixin;
     padding: 0 5px;
     flex-shrink: 0;
+
+    .btn:hover {
+      background-color: @file-tree-toolbar-btn-hover-color;
+    }
   }
 
   > file-tree-root,

services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss

@@ -12,4 +12,5 @@
 
 .btn-toolbar {
   gap: var(--spacing-03);
+  flex-wrap: nowrap;
 }

services/web/frontend/stylesheets/variables/all.less

@@ -952,6 +952,7 @@
 @file-tree-multiselect-hover-bg: @blue-dark;
 @file-tree-droppable-bg-color: @neutral-40;
 @file-tree-error-color: @neutral-20;
+@file-tree-toolbar-btn-hover-color: rgba(125, 125, 125, 0.2);
 
 // File outline
 @outline-v-rhythm: 24px;

services/web/frontend/stylesheets/variables/themes/light.less

@@ -34,6 +34,7 @@
 @file-tree-multiselect-hover-bg: @blue-dark;
 @file-tree-droppable-bg-color: @neutral-40;
 @file-tree-error-color: @ol-blue-gray-5;
+@file-tree-toolbar-btn-hover-color: @neutral-10;
 
 @content-alt-bg-color: @neutral-10;