From e304e8fbb5c68587216b0e56eca9fbb5861d93fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <b.baedorf@openproject.com>
Date: Wed, 27 Jul 2022 16:41:13 +0000
Subject: [PATCH] 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.
---
 .../project-menu-autocomplete.component.sass                | 2 ++
 .../project-menu-autocomplete.component.ts                  | 6 ++++++
 frontend/src/global_styles/common/header/app-header.sass    | 1 +
 .../src/global_styles/common/header/main-menu-toggle.sass   | 4 +++-
 frontend/src/global_styles/content/_project_list_modal.sass | 2 ++
 5 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.component.sass

diff --git a/frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.component.sass b/frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.component.sass
new file mode 100644
index 0000000000..f7a3a714a8
--- /dev/null
+++ b/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%
diff --git a/frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.component.ts b/frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.component.ts
index 9ccef7c810..62d962ad92 100644
--- a/frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.component.ts
+++ b/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');
diff --git a/frontend/src/global_styles/common/header/app-header.sass b/frontend/src/global_styles/common/header/app-header.sass
index 27c2110b92..cbc02da098 100644
--- a/frontend/src/global_styles/common/header/app-header.sass
+++ b/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
diff --git a/frontend/src/global_styles/common/header/main-menu-toggle.sass b/frontend/src/global_styles/common/header/main-menu-toggle.sass
index 6a14a035c3..bb6774d82b 100644
--- a/frontend/src/global_styles/common/header/main-menu-toggle.sass
+++ b/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
\ No newline at end of file
+    display: none
diff --git a/frontend/src/global_styles/content/_project_list_modal.sass b/frontend/src/global_styles/content/_project_list_modal.sass
index f47ba71c40..3b35ca5fc5 100644
--- a/frontend/src/global_styles/content/_project_list_modal.sass
+++ b/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