Avoid that the edit field is too long and thus editable by click outside of the field

app/assets/stylesheets/content/_project_status.sass

@@ -1,9 +1,12 @@
-
+$project-status-gray: #CCCCCC
+$project-status-red: #E73E3D
+$project-status-orange: #FFB030
+$project-status-green: #00D12D
 
 // Project status widget
 .ng-select
   &.project-status
-    max-width: 300px
+    max-width: 250px
     .ng-select-container
       min-height: 56px !important
       height: 56px !important
@@ -11,10 +14,6 @@
     .ng-input
       display: none
 
-$project-status-gray: #CCCCCC
-$project-status-red: #E73E3D
-$project-status-orange: #FFB030
-$project-status-green: #00D12D
 .project-status--bulb
   display: inline-block
   width: 40px
@@ -37,6 +36,9 @@ $project-status-green: #00D12D
     border-color: $project-status-green
     background-color: adjust-color($project-status-green, $alpha: -0.7)
 
+.project-status--container
+  display: inline-block
+
 .project-status--display-field
   height: 56px
   .status.-editable

frontend/src/app/modules/grids/widgets/project-status/project-status.component.html

@@ -10,27 +10,17 @@
 
 <div class="grid--widget-content">
   <edit-form *ngIf="(project$ | async) as project" [resource]="project">
+    <div class="project-status--container">
       <editable-attribute-field [resource]="project"
                                 fieldName="status"
                                 wrapperClasses="project-status--display-field">
       </editable-attribute-field>
+    </div>
+    <div class="project-status-explanation--container">
       <editable-attribute-field [resource]="project"
                                 fieldName="statusExplanation">
       </editable-attribute-field>
+    </div>
   </edit-form>
-
-<!--  <ng-select [disabled]="true"-->
-<!--             [items]="availableStatuses"-->
-<!--             [(ngModel)]="currentStatusCode"-->
-<!--             bindLabel="name"-->
-<!--             bindValue="code"-->
-<!--             class="traffic-lights">-->
-<!--    <ng-template ng-label-tmp let-item="item">-->
-<!--      <span class="bulb" [ngClass]="item.colorClass"></span>-->
-<!--      <span class="status-name" [ngClass]="item.colorClass">{{item.name}}</span>-->
-<!--    </ng-template>-->
-<!--  </ng-select>-->
-<!--  <div class="explanation" [innerHtml]="explanation"></div>-->
-
 </div>