Take care that activeInput is always correctly set and not only toggled. Otherwise the state is wrong, when I remove the parent via the icon, resulting in styling errors.

frontend/src/app/components/work-packages/wp-breadcrumb/wp-breadcrumb.component.ts

@@ -55,6 +55,10 @@ export class WorkPackageBreadcrumbComponent {
   public get hierarchyLabel() {
     return (this.hierarchyCount === 1) ? this.text.parent : this.text.hierarchy;
   }
+
+  public updateActiveInput(val:boolean) {
+    this.inputActive = val;
+  }
 }
 
 

frontend/src/app/components/work-packages/wp-breadcrumb/wp-breadcrumb.html

@@ -20,7 +20,7 @@
     </ng-container>
     <li
         [ngClass]="{ 'active-parent-select': inputActive, 'icon4 icon-small icon-arrow-right5': !inputActive && hierarchyCount > 1 }">
-      <wp-breadcrumb-parent (onSwitch)="inputActive = !inputActive" [workPackage]="workPackage"></wp-breadcrumb-parent>
+      <wp-breadcrumb-parent (onSwitch)="updateActiveInput($event)" [workPackage]="workPackage"></wp-breadcrumb-parent>
     </li>
   </ul>
 </div>

frontend/src/app/components/work-packages/wp-breadcrumb/wp-breadcrumb.sass

@@ -1,2 +1,2 @@
 .active-parent-select
-  width: 100%
+  min-width: 320px