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

@@ -1,36 +1,26 @@
 <widget-header
-    [name]="widgetName"
-    [icon]="'info1'"
-    [editable]="isEditable">
+  [name]="widgetName"
+  [icon]="'info1'"
+  [editable]="isEditable">
 
   <widget-menu
-      [resource]="resource">
+    [resource]="resource">
   </widget-menu>
 </widget-header>
 
 <div class="grid--widget-content">
   <edit-form *ngIf="(project$ | async) as project" [resource]="project">
-    <editable-attribute-field [resource]="project"
-                              fieldName="status"
-                              wrapperClasses="project-status--display-field">
-    </editable-attribute-field>
-    <editable-attribute-field [resource]="project"
-                              fieldName="statusExplanation">
-    </editable-attribute-field>
+    <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>