From ccb639bcead2c2401c5d3e73824b62604bcfab11 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Fri, 1 Nov 2024 14:35:54 +0100
Subject: [PATCH] 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   | 4 ++++
 .../stylesheets/bootstrap-5/components/button-group.scss      | 1 +
 services/web/frontend/stylesheets/variables/all.less          | 1 +
 services/web/frontend/stylesheets/variables/themes/light.less | 1 +
 4 files changed, 7 insertions(+)

diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less
index 1d5d1a8b3c..38d74cc470 100644
--- a/services/web/frontend/stylesheets/app/editor/file-tree.less
+++ b/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,
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss b/services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss
index 5825a57ca6..a87e642ce4 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss
@@ -12,4 +12,5 @@
 
 .btn-toolbar {
   gap: var(--spacing-03);
+  flex-wrap: nowrap;
 }
diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less
index a6bef45a3e..428e410950 100644
--- a/services/web/frontend/stylesheets/variables/all.less
+++ b/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;
diff --git a/services/web/frontend/stylesheets/variables/themes/light.less b/services/web/frontend/stylesheets/variables/themes/light.less
index 4308dd9a55..681f3f0344 100644
--- a/services/web/frontend/stylesheets/variables/themes/light.less
+++ b/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;