[SI-2564] bugfix

Signed-off-by: Peter Buschmann <peter.buschmann@pta.de>

projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html

diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
index 504a3cb..848e815 100644
--- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
+++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
@@ -12,110 +12,108 @@
 ********************************************************************************/ -->
 <app-card-layout *ngIf="gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async as formState">
   <div header>
-    <div class="header-container">
-      <div class="diverse-btn-container">
-        <div>
-          <span>{{ 'GridFailure.Title' | translate }}</span>
-        </div>
-        <div>
+    <div class="diverse-btn-container">
+      <div>
+        <span>{{ 'GridFailure.Title' | translate }}</span>
+      </div>
+      <div class="subcontainer1">
+        <button
+          *ngIf="!gridFailureDetailsSandbox.currentFormState.isPristine"
+          type="button"
+          class="btn btn-primary button"
+          (click)="gridFailureDetailsSandbox.cancel()"
+        >
+          {{ 'CancelBtn' | translate }}
+        </button>
+        <button
+          *ngIf="gridFailureDetailsSandbox.currentFormState.isPristine"
+          type="button"
+          class="btn btn-primary button"
+          (click)="gridFailureDetailsSandbox.cancel()"
+        >
+          {{ 'CloseBtn' | translate }}
+        </button>
+        <ng-container *ngIf="gridFailureDetailsSandbox.showDeleteButton && formState.isEnabled">
           <button
-            *ngIf="!gridFailureDetailsSandbox.currentFormState.isPristine"
+            *visibleByRight="RolesEnum.CREATOR"
+            type="button"
+            class="btn btn-outline-danger delete"
+            (click)="gridFailureDetailsSandbox.deleteGridFailure()"
+          >
+            {{ 'DeleteBtn' | translate }}
+          </button>
+        </ng-container>
+        <ng-container *ngIf="gridFailureDetailsSandbox.showStornoButton && formState.isEnabled">
+          <button
+            *visibleByRight="RolesEnum.QUALIFIER"
+            type="button"
+            class="btn btn-primary right-button"
+            (click)="gridFailureDetailsSandbox.setState(StateEnum.CANCELED)"
+          >
+            {{ 'StornoBtn' | translate }}
+          </button>
+        </ng-container>
+        <ng-container *ngIf="gridFailureDetailsSandbox.showCompleteButton && formState.isEnabled">
+          <button
+            *visibleByRight="RolesEnum.QUALIFIER"
+            type="button"
+            class="btn btn-primary right-button"
+            (click)="gridFailureDetailsSandbox.setState(StateEnum.COMPLETED)"
+          >
+            {{ 'CompleteBtn' | translate }}
+          </button>
+        </ng-container>
+      </div>
+      <div class="subcontainer2" *ngIf="formState.isEnabled || gridFailureDetailsSandbox.showPublishButton">
+        <ng-container *ngIf="gridFailureDetailsSandbox.showPublishButton && !gridFailureDetailsSandbox.oldVersion">
+          <button
+            *visibleByRight="RolesEnum.PUBLISHER"
+            [disabled]="gridFailureDetailsSandbox.disablePublishButton"
+            [ngClass]="{ disabledButton: gridFailureDetailsSandbox.disablePublishButton }"
             type="button"
             class="btn btn-primary button"
-            (click)="gridFailureDetailsSandbox.cancel()"
+            (click)="gridFailureDetailsSandbox.setPublishedState()"
           >
-            {{ 'CancelBtn' | translate }}
+            {{ 'PublishBtn' | translate }}
           </button>
+        </ng-container>
+        <ng-container *ngIf="gridFailureDetailsSandbox.showQualifyButton">
           <button
-            *ngIf="gridFailureDetailsSandbox.currentFormState.isPristine"
+            *visibleByRight="RolesEnum.QUALIFIER"
             type="button"
             class="btn btn-primary button"
-            (click)="gridFailureDetailsSandbox.cancel()"
+            (click)="gridFailureDetailsSandbox.setState(StateEnum.QUALIFIED)"
           >
-            {{ 'CloseBtn' | translate }}
+            {{ 'QualifyBtn' | translate }}
           </button>
-          <ng-container *ngIf="gridFailureDetailsSandbox.showDeleteButton && formState.isEnabled">
+        </ng-container>
+        <ng-container *ngIf="gridFailureDetailsSandbox.showCreatedButton">
+          <button
+            type="button"
+            *visibleByRight="RolesEnum.CREATOR"
+            class="btn btn-primary right-button"
+            (click)="gridFailureDetailsSandbox.setState(StateEnum.CREATED)"
+          >
+            {{ 'CreatedBtn' | translate }}
+          </button>
+        </ng-container>
+        <ng-container *ngIf="!gridFailureDetailsSandbox.oldVersion">
+          <ng-container *ngIf="gridFailureDetailsSandbox.showUpdateButton; else saveBtn">
             <button
-              *visibleByRight="RolesEnum.CREATOR"
+              *visibleByRight="[RolesEnum.QUALIFIER, RolesEnum.CREATOR]"
               type="button"
-              class="btn btn-outline-danger delete"
-              (click)="gridFailureDetailsSandbox.deleteGridFailure()"
+              class="btn btn-success button"
+              (click)="gridFailureDetailsSandbox.setState(StateEnum.UPDATED)"
             >
-              {{ 'DeleteBtn' | translate }}
+              {{ 'UpdateBtn' | translate }}
             </button>
           </ng-container>
-          <ng-container *ngIf="gridFailureDetailsSandbox.showStornoButton && formState.isEnabled">
-            <button
-              *visibleByRight="RolesEnum.QUALIFIER"
-              type="button"
-              class="btn btn-primary right-button"
-              (click)="gridFailureDetailsSandbox.setState(StateEnum.CANCELED)"
-            >
-              {{ 'StornoBtn' | translate }}
+          <ng-template #saveBtn>
+            <button *ngIf="formState.isEnabled" type="button" class="btn btn-success button" (click)="gridFailureDetailsSandbox.saveGridFailure()">
+              {{ 'SaveBtn' | translate }}
             </button>
-          </ng-container>
-          <ng-container *ngIf="gridFailureDetailsSandbox.showCompleteButton && formState.isEnabled">
-            <button
-              *visibleByRight="RolesEnum.QUALIFIER"
-              type="button"
-              class="btn btn-primary right-button"
-              (click)="gridFailureDetailsSandbox.setState(StateEnum.COMPLETED)"
-            >
-              {{ 'CompleteBtn' | translate }}
-            </button>
-          </ng-container>
-        </div>
-        <div *ngIf="formState.isEnabled || gridFailureDetailsSandbox.showPublishButton">
-          <ng-container *ngIf="gridFailureDetailsSandbox.showPublishButton && !gridFailureDetailsSandbox.oldVersion">
-            <button
-              *visibleByRight="RolesEnum.PUBLISHER"
-              [disabled]="gridFailureDetailsSandbox.disablePublishButton"
-              [ngClass]="{ disabledButton: gridFailureDetailsSandbox.disablePublishButton }"
-              type="button"
-              class="btn btn-primary button"
-              (click)="gridFailureDetailsSandbox.setPublishedState()"
-            >
-              {{ 'PublishBtn' | translate }}
-            </button>
-          </ng-container>
-          <ng-container *ngIf="gridFailureDetailsSandbox.showQualifyButton">
-            <button
-              *visibleByRight="RolesEnum.QUALIFIER"
-              type="button"
-              class="btn btn-primary button"
-              (click)="gridFailureDetailsSandbox.setState(StateEnum.QUALIFIED)"
-            >
-              {{ 'QualifyBtn' | translate }}
-            </button>
-          </ng-container>
-          <ng-container *ngIf="gridFailureDetailsSandbox.showCreatedButton">
-            <button
-              type="button"
-              *visibleByRight="RolesEnum.CREATOR"
-              class="btn btn-primary right-button"
-              (click)="gridFailureDetailsSandbox.setState(StateEnum.CREATED)"
-            >
-              {{ 'CreatedBtn' | translate }}
-            </button>
-          </ng-container>
-          <ng-container *ngIf="!gridFailureDetailsSandbox.oldVersion">
-            <ng-container *ngIf="gridFailureDetailsSandbox.showUpdateButton; else saveBtn">
-              <button
-                *visibleByRight="[RolesEnum.QUALIFIER, RolesEnum.CREATOR]"
-                type="button"
-                class="btn btn-success button"
-                (click)="gridFailureDetailsSandbox.setState(StateEnum.UPDATED)"
-              >
-                {{ 'UpdateBtn' | translate }}
-              </button>
-            </ng-container>
-            <ng-template #saveBtn>
-              <button *ngIf="formState.isEnabled" type="button" class="btn btn-success button" (click)="gridFailureDetailsSandbox.saveGridFailure()">
-                {{ 'SaveBtn' | translate }}
-              </button>
-            </ng-template>
-          </ng-container>
-        </div>
+          </ng-template>
+        </ng-container>
       </div>
     </div>
   </div>

projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss

diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
index 574e308..04d6198 100644
--- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
+++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
@@ -76,26 +76,26 @@
   justify-content: flex-start;
 }
 
-.header-container {
-  display: flex;
-  justify-content: space-between;
-}
-
-.header-title {
-  flex: 1;
-  padding-top: 15px;
-}
-
 .diverse-btn-container {
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
 
   * {
     margin: 10px 0px 5px 5px;
   }
 }
 
+.subcontainer1 {
+  display: flex;
+  justify-content: center;
+}
+
+.subcontainer2 {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .card {
   height: calc(100vh - 180px);
 }