Fix project name overflow in app header (#11028)

* Fix project name overflow in app header

Longer project names were overflowing in the app header, causing the
text to flow behind the logo, search and user menu. This commit fixes
that issue. This also fixes the menu toggle shrinking in width whenever
there was too little space. Instead, the project title is shrunk.

Closes https://community.openproject.org/projects/openproject/work_packages/43314/activity

* Give header project selector all available space

On mobile and tablet the instance logo dissapears from the app header,
but the left and right side were both still taking 50% of available
space. However, it makes sense that the project selector can use this
screen estate to show longer project names.

frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.component.sass

@@ -0,0 +1,2 @@
+.op-project-menu-autocomplete
+  max-width: 100%

frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.component.ts

@@ -31,6 +31,8 @@ import { I18nService } from 'core-app/core/i18n/i18n.service';
 import {
   ChangeDetectionStrategy,
   Component,
+  HostBinding,
+  ViewEncapsulation,
 } from '@angular/core';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
 import { combineLatest } from 'rxjs';
@@ -58,8 +60,12 @@ export const projectMenuAutocompleteSelector = 'project-menu-autocomplete';
   providers: [
     SearchableProjectListService,
   ],
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./project-menu-autocomplete.component.sass'],
 })
 export class ProjectMenuAutocompleteComponent {
+  @HostBinding('class.op-project-menu-autocomplete') className = true;
+
   dropModalOpen = false;
 
   canCreateNewProjects$ = this.currentUserService.hasCapabilities$('projects/create');

frontend/src/global_styles/common/header/app-header.sass

@@ -14,6 +14,7 @@
   width: 100vw
 
   @media screen and (max-width: 679px)
+    grid-template-columns: minmax(0, auto) auto 1fr
     position: fixed
     top: 0
     left: 0

frontend/src/global_styles/common/header/main-menu-toggle.sass

@@ -1,3 +1,5 @@
 .op-main-menu-toggle
+  flex-shrink: 0
+
   @at-root .nosidebar &
-    display: none
+    display: none

frontend/src/global_styles/content/_project_list_modal.sass

@@ -1,4 +1,6 @@
 .op-project-list-modal
+  max-width: 100%
+
   &--header
     display: flex
     justify-content: space-between