From 1b5d31941ecac467b5e5538ee2f5268e81967ddc Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Thu, 8 May 2025 12:51:25 +0100
Subject: [PATCH] Merge pull request #25383 from overleaf/mj-ide-long-title

[web] Editor redesign: Allow project name to shrink

GitOrigin-RevId: 4d25291437fae9672f0d0d4d20bde269f771020a
---
 .../components/toolbar/project-title.tsx      |  6 ++---
 .../pages/editor/toolbar-redesign.scss        | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/project-title.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/project-title.tsx
index 648fcb0b8f..68860da4ea 100644
--- a/services/web/frontend/js/features/ide-redesign/components/toolbar/project-title.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/toolbar/project-title.tsx
@@ -52,12 +52,12 @@ export const ToolbarProjectTitle = () => {
   }
 
   return (
-    <Dropdown align="start">
+    <Dropdown align="start" className="ide-redesign-toolbar-project-dropdown">
       <DropdownToggle
         id="project-title-options"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued fw-bold  ide-redesign-toolbar-button-subdued"
+        className="ide-redesign-toolbar-project-dropdown-toggle ide-redesign-toolbar-dropdown-toggle-subdued fw-bold ide-redesign-toolbar-button-subdued"
       >
-        {name}
+        <span className="ide-redesign-toolbar-project-name">{name}</span>
         <MaterialIcon
           type="keyboard_arrow_down"
           accessibilityLabel={t('project_title_options')}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
index e77ad32a51..a4df2e4e36 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
@@ -36,12 +36,18 @@
   box-sizing: border-box;
   height: $toolbar-height;
   padding: 0 var(--spacing-02);
+  gap: var(--spacing-05);
 
   .ide-redesign-toolbar-menu {
     display: flex;
     gap: var(--spacing-05);
   }
 
+  .ide-redesign-toolbar-menu,
+  .ide-redesign-toolbar-actions {
+    flex: 0 0 auto;
+  }
+
   .ide-redesign-toolbar-home-button {
     width: $home-button-size;
     height: $home-button-size;
@@ -182,6 +188,22 @@
   }
 }
 
+.ide-redesign-toolbar-project-dropdown {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.ide-redesign-toolbar-project-dropdown-toggle {
+  display: flex;
+  max-width: 100%;
+}
+
+.ide-redesign-toolbar-project-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ide-redesign-labs-button.btn.btn-secondary {
   @include labs-button;
 }