diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 387b0b3693..ecbf5f3727 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -163,6 +163,7 @@ See COPYRIGHT and LICENSE files for more details.
     <%= content_for :additional_js_dom_ready %>
   }(jQuery));
 <% end %>
+<div class="op-wide-autocomplete-wrapper"></div>
 <%= call_hook :view_layouts_base_body_bottom %>
 </body>
 </html>
diff --git a/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.html b/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.html
index 1c56dcaa7a..1f21a397f6 100644
--- a/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.html
+++ b/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.html
@@ -29,11 +29,13 @@
     let-search="search"
   >
     <div
+      [title]="item.name"
       class="ng-option-label ellipsis"
       [ngStyle]="{ 'padding-left.px': item.numberOfAncestors * 16 }"
       [opSearchHighlight]="search"
     >{{ item.name }}</div>
     <div
+      [title]="item.disabledReason"
       *ngIf="item.disabled && item.disabledReason"
       class="ng-option-label ellipsis"
       [ngStyle]="{ 'padding-left.px': item.numberOfAncestors * 16 }"
diff --git a/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.sass b/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.sass
index 5d79c0ba5d..3f737376d1 100644
--- a/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.sass
+++ b/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.sass
@@ -6,7 +6,11 @@
     width: 100%
     display: flex
 
+  &_inline
+    .op-autocompleter
+      display: inline
+
   // Unfortunately, ng-select is extremely specific with its selectors
   .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled
     cursor: default
-    color: $spot-color-basic-gray-3 
+    color: $spot-color-basic-gray-3
diff --git a/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.ts b/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.ts
index 46401bac7d..800dca808a 100644
--- a/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.ts
+++ b/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.ts
@@ -89,6 +89,11 @@ export interface IProjectAutocompleterData {
 export class ProjectAutocompleterComponent implements ControlValueAccessor {
   @HostBinding('class.op-project-autocompleter') public className = true;
 
+  @HostBinding('class.op-project-autocompleter_inline')
+  public get inlineClass():boolean {
+    return this.isInlineContext;
+  }
+
   projectTracker = (item:IProjectAutocompleteItem):ID => item.href || item.id;
 
   // Load all projects as default
@@ -112,6 +117,8 @@ export class ProjectAutocompleterComponent implements ControlValueAccessor {
 
   @Input() public appendTo = '';
 
+  @Input() public isInlineContext = false;
+
   // This function allows mapping of the results before they are fed to the tree
   // structuring and destructuring algorithms used internally the this component
   // to show the tree structure. By default it does not do much, but it is
diff --git a/frontend/src/app/shared/components/fields/edit/field-types/project-edit-field.component.html b/frontend/src/app/shared/components/fields/edit/field-types/project-edit-field.component.html
index 3ac6ee209e..8e3ae39df9 100644
--- a/frontend/src/app/shared/components/fields/edit/field-types/project-edit-field.component.html
+++ b/frontend/src/app/shared/components/fields/edit/field-types/project-edit-field.component.html
@@ -2,11 +2,13 @@
   *ngIf="url; else loadingTemplate"
   [ngClass]="'inline-edit--field ' + handler.fieldName"
 
+  [value]="value"
   [url]="url"
   [apiFilters]="APIFilters"
   [focusDirectly]="!(handler.inEditMode || isNew)"
   [openDirectly]="!isNew"
-  appendTo="body"
+  [isInlineContext]="true"
+  appendTo=".op-wide-autocomplete-wrapper"
 
   (valueChange)="onModelChange($event)"
   (cancel)="handler.handleUserCancel()"
@@ -19,4 +21,4 @@
   >
     <svg:rect x="0" y="0" width="100%" height="100%" rx="1" />
   </op-content-loader>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/frontend/src/global_styles/common/openproject-common.module.sass b/frontend/src/global_styles/common/openproject-common.module.sass
index cd081b38ff..52ed449808 100644
--- a/frontend/src/global_styles/common/openproject-common.module.sass
+++ b/frontend/src/global_styles/common/openproject-common.module.sass
@@ -8,3 +8,4 @@
 @import '../../app/shared/components/table/scrollable-table'
 @import 'export-options/export-options'
 @import 'select/select'
+@import 'wide-autocomplete-wrapper/wide-autocomplete-wrapper'
diff --git a/frontend/src/global_styles/common/wide-autocomplete-wrapper/wide-autocomplete-wrapper.sass b/frontend/src/global_styles/common/wide-autocomplete-wrapper/wide-autocomplete-wrapper.sass
new file mode 100644
index 0000000000..6c127da34c
--- /dev/null
+++ b/frontend/src/global_styles/common/wide-autocomplete-wrapper/wide-autocomplete-wrapper.sass
@@ -0,0 +1,26 @@
+/* This block is currently only used as an `appendTo` option
+ * for ng-select instances that need an option dropdown list that
+ * is wider than the input field it is attached to.
+ *
+ * You can use this by adding `appendTo=".op-wide-autocomplete-wrapper"`
+ * to any ng-select instance that needs it.
+ *
+ * Normally, ng-select propagates classes to the dropdowns when `appendTo` is used (see:
+ * https://github.com/ng-select/ng-select/issues/1361#issuecomment-537837586 ).
+ * Unfortunately for us, this does not work when using `ngClass` (see:
+ * https://github.com/ng-select/ng-select/issues/1627 )
+ *
+ * So instead of simply adding a class to the dropdown,
+ * we have to add a specific class to the DOM-element it is attached to
+ *
+ * Note: This makes the panel wider to the right hand side,
+ * so it if the input is already at the very right end, the dropdown will propabyl be cut off.
+ */
+
+.op-wide-autocomplete-wrapper
+  position: absolute
+
+  .ng-dropdown-panel
+    // This has to be important because ng-select sets
+    // the positioning styles directly on the element.
+    min-width: 200px !important