Merge pull request #25383 from overleaf/mj-ide-long-title

[web] Editor redesign: Allow project name to shrink

GitOrigin-RevId: 4d25291437fae9672f0d0d4d20bde269f771020a

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')}

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