From fc6f420b9687e9d40c56a9a28ebdd1ba65e3aa0f Mon Sep 17 00:00:00 2001
From: Sofie Hofmann <29145005+sofie29@users.noreply.github.com>
Date: Tue, 8 Dec 2020 17:37:20 +0100
Subject: [PATCH] TSK-1474: Update classification details layout (#1358)

Co-authored-by: Chi Nguyen <c.nguyen.prog@gmail.com>
---
 .../classification-details.component.html     | 308 +++++++++---------
 .../classification-details.component.scss     | 189 ++++++-----
 .../classification-details.component.spec.ts  |  19 +-
 .../classification-details.component.ts       |   3 +-
 .../classification-list.component.html        |   8 +-
 .../classification-list.component.scss        |   5 +-
 .../classification-overview.component.scss    |   2 +-
 7 files changed, 283 insertions(+), 251 deletions(-)

diff --git a/web/src/app/administration/components/classification-details/classification-details.component.html b/web/src/app/administration/components/classification-details/classification-details.component.html
index 327f8c6b4..c63a676c0 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.html
+++ b/web/src/app/administration/components/classification-details/classification-details.component.html
@@ -1,11 +1,11 @@
 <div class="classification-details">
 
-  <div class="classification-details__wrapper" id="classification-details" *ngIf="classification && !requestInProgress">
+  <div class="classification-details-wrapper" id="classification-details" *ngIf="classification && !requestInProgress">
 
     <!-- TITLE + ACTION BUTTONS -->
-    <mat-toolbar class="classification-details__action-toolbar">
-      <h4 class="classification-details__headline">{{classification.name}}&nbsp; [{{classification.type}}]
-        <span *ngIf="isCreatingNewClassification" class="badge warning"> {{badgeMessage$ | async}}</span>
+    <mat-toolbar class="action-toolbar">
+      <h4 class="action-toolbar__headline">{{classification.name}}&nbsp; [{{classification.type}}]
+        <span *ngIf="isCreatingNewClassification" class="action-toolbar__badge-message"> {{badgeMessage$ | async}}</span>
       </h4>
 
       <div>
@@ -16,7 +16,7 @@
 
       <button mat-stroked-button class="action-toolbar__button" matTooltip="Revert changes to previous saved state" (click)="onRestore()">
         Undo Changes
-        <mat-icon class="button__green-blue md-20">restore</mat-icon>
+        <mat-icon class="action-toolbar__aquamarine-button md-20">restore</mat-icon>
       </button>
 
       <button mat-stroked-button [matMenuTriggerFor]="buttonMenu" matTooltip="More actions" class="action-toolbar__button" id="action-toolbar__more-buttons">
@@ -25,11 +25,11 @@
 
       <mat-menu #buttonMenu="matMenu">
         <button mat-menu-item class="action-toolbar__dropdown" matTooltip="Copy current values to create new classification" (click)="onCopy()">
-          <mat-icon class="button__green-blue">content_copy</mat-icon>
+          <mat-icon class="action-toolbar__aquamarine-button">content_copy</mat-icon>
           <span>Copy</span>
         </button>
         <button mat-menu-item class="action-toolbar__dropdown" matTooltip="Delete this classification" (click)="onRemoveClassification()">
-          <mat-icon class="button__red">delete</mat-icon>
+          <mat-icon class="action-toolbar__red-button">delete</mat-icon>
           <span>Delete</span>
         </button>
         <button mat-menu-item class="action-toolbar__dropdown" style="border-bottom-style: none;"  matTooltip="Close this classification and discard all changes" (click)="onCloseClassification()">
@@ -38,172 +38,184 @@
         </button>
       </mat-menu>
       </div>
-
     </mat-toolbar>
 
+
     <!-- DETAILED FIELDS -->
-    <div class="panel-body" style="padding: 0">
+    <div style="padding: 0">
       <ng-form #ClassificationForm="ngForm">
-        <div class="classification__detailed-fields">
+        <div class="detailed-fields">
 
-          <h6 class="classification-details__subheading" style="margin-top: 65px;"> General </h6>
-          <mat-divider class="classification-details__horizontal-line"> </mat-divider>
+          <h6 class="detailed-fields__subheading" style="margin-top: 65px;"> General </h6>
+          <mat-divider class="detailed-fields__horizontal-line"> </mat-divider>
 
-          <!-- KEY -->
-          <mat-form-field appearance="outline">
-            <mat-label>Key</mat-label>
-            <label for="classification-key"></label>
-            <input matInput required type="text" #key="ngModel" maxlength="32" [disabled]="!isCreatingNewClassification"
-                   id="classification-key" placeholder="Key" [(ngModel)]="classification.key"
-                   name="classification.key" (input)="validateInputOverflow(key, 32)">
-          </mat-form-field>
-          <div *ngIf="inputOverflowMap.get(key.name)" class="error">{{lengthError}}</div>
-          <!-- <taskana-shared-field-error-display [displayError]="key.invalid && key.dirty"
-          errorMessage="* Key is required">
-          </taskana-shared-field-error-display> -->
+          <!-- GENERAL -->
+          <div class="detailed-fields__general">
 
-            <!-- NAME -->
-            <mat-form-field appearance="outline">
-              <mat-label>Name</mat-label>
-              <label for="classification-name"></label>
-              <input matInput type="text" required maxlength="255" #name="ngModel"
-                     id="classification-name" placeholder="Name"
-                     [(ngModel)]="classification.name" name="classification.name"
-                     (input)="validateInputOverflow(name, 255)">
-            </mat-form-field>
-          <div *ngIf="inputOverflowMap.get(name.name)" class="error">{{lengthError}}</div>
-          <!--
-          <taskana-shared-field-error-display [displayError]="name.invalid && name.dirty"
-                                              errorMessage="* Name is required">
-          </taskana-shared-field-error-display> -->
+            <!-- GENERAL LEFT COLUMN -->
+            <div class="detailed-fields__general-left-column">
 
-
-          <!-- SERVICE LEVEL AND PRIORITY-->
-          <div class="classification-details__service-and-priority">
-            <div class="classification-details__service">
-              <mat-form-field appearance="outline" class="classification-details__mat-form-field">
-                <mat-label> Service Level </mat-label>
-                <label for="classification-service-level"></label>
-                <input matInput type="text" required maxlength="255"
-                       id="classification-service-level" placeholder="Service Level"
-                       [(ngModel)]="classification.serviceLevel" name="classification.serviceLevel"
-                       #serviceLevel="ngModel" (input)="validateInputOverflow(serviceLevel, 255)">
-              </mat-form-field>
-              <div *ngIf="inputOverflowMap.get(serviceLevel.name)" class="error">{{lengthError}}</div>
-            </div>
-
-            <div class="classification-details__priority">
-              <!-- I replaced this component by the mat-form-field. Is this the same?
-              I don't understand all methods in the number-picker component.
-              <taskana-shared-number-picker [(ngModel)]="classification.priority"
-                                            name="classification.priority"
-                                            id="classification-priority"
-                                            [required]="true"
-                                            [name]="'Priority'">
-              </taskana-shared-number-picker> -->
+              <!-- KEY -->
               <mat-form-field appearance="outline">
-                <mat-label>Priority</mat-label>
-                <label for="classification-priority"></label>
-                <input matInput type="number" [(ngModel)]="classification.priority"
-                       name="classification.priority" id="classification-priority" required min="0">
+                <mat-label>Key</mat-label>
+                <label for="classification-key"></label>
+                <input matInput required type="text" #key="ngModel" maxlength="32" [disabled]="!isCreatingNewClassification"
+                       id="classification-key" placeholder="Key" [(ngModel)]="classification.key"
+                       name="classification.key" (input)="validateInputOverflow(key, 32)">
+              </mat-form-field>
+              <div *ngIf="inputOverflowMap.get(key.name)" class="error">{{lengthError}}</div>
+              <!-- <taskana-shared-field-error-display [displayError]="key.invalid && key.dirty"
+              errorMessage="* Key is required">
+              </taskana-shared-field-error-display> -->
+
+              <!-- NAME -->
+              <mat-form-field appearance="outline">
+                <mat-label>Name</mat-label>
+                <label for="classification-name"></label>
+                <input matInput type="text" required maxlength="255" #name="ngModel"
+                       id="classification-name" placeholder="Name"
+                       [(ngModel)]="classification.name" name="classification.name"
+                       (input)="validateInputOverflow(name, 255)">
+              </mat-form-field>
+              <div *ngIf="inputOverflowMap.get(name.name)" class="error">{{lengthError}}</div>
+              <!--
+              <taskana-shared-field-error-display [displayError]="name.invalid && name.dirty"
+                                                  errorMessage="* Name is required">
+              </taskana-shared-field-error-display> -->
+
+              <!-- DESCRIPTION -->
+              <mat-form-field appearance="outline">
+                <mat-label>Description</mat-label>
+                <label for="classification-description"></label>
+                <textarea matInput
+                          cdkTextareaAutosize
+                          cdkAutosizeMinRows="6"
+                          cdkAutosizeMaxRows="6"
+                          maxlength="255"
+                          id="classification-description" placeholder="Description"
+                          [(ngModel)]="classification.description"
+                          name="classification.description" #description="ngModel"
+                          (input)="validateInputOverflow(description, 255)"></textarea>
+              </mat-form-field>
+              <div *ngIf="inputOverflowMap.get(description.name)" class="error">{{lengthError}}</div>
+            </div>
+
+
+
+            <div class="detailed-fields__spacer"> </div>
+
+
+
+            <!-- GENERAL RIGHT ROW -->
+            <div class="detailed-fields__general-right-column">
+
+              <!-- DOMAIN -->
+              <mat-form-field appearance="outline">
+                <mat-label>Domain</mat-label>
+                <label for="classification-domain"></label>
+                <input matInput type="text" disabled id="classification-domain"
+                       placeholder="Domain" [(ngModel)]="classification.domain"
+                       name="classification.domain">
               </mat-form-field>
 
-              <taskana-shared-field-error-display
-                [displayError]="!isFieldValid('classification.priority')"
-                [validationTrigger]="this.toggleValidationMap.get('classification.priority.name')"
-                errorMessage="* Priority is required">
-              </taskana-shared-field-error-display>
+              <div *ngIf="!masterDomainSelected()" class="detailed-fields__domain-checkbox">
+                Valid in Domain
+                <a (click)="validChanged()" title="Valid in Domain">
+                  <mat-icon class="detailed-fields__domain-checkbox-icon">{{classification.isValidInDomain ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
+                </a>
+              </div>
+
+              <!-- SERVICE LEVEL AND PRIORITY-->
+              <div class="detailed-fields__service-and-priority">
+
+                <!-- SERVICE LEVEL -->
+                <div style="width: 48%">
+                  <mat-form-field appearance="outline" style="width: 100%">
+                    <mat-label> Service Level </mat-label>
+                    <label for="classification-service-level"></label>
+                    <input matInput type="text" required maxlength="255"
+                           id="classification-service-level" placeholder="Service Level"
+                           [(ngModel)]="classification.serviceLevel" name="classification.serviceLevel"
+                           #serviceLevel="ngModel" (input)="validateInputOverflow(serviceLevel, 255)">
+                  </mat-form-field>
+                  <div *ngIf="inputOverflowMap.get(serviceLevel.name)" class="error">{{lengthError}}</div>
+                </div>
+
+                <!-- PRIORITY-->
+                <div style="width: 48%">
+                  <mat-form-field appearance="outline"  style="width: 100%">
+                    <mat-label>Priority</mat-label>
+                    <label for="classification-priority"></label>
+                    <input matInput type="number" [(ngModel)]="classification.priority"
+                           name="classification.priority" id="classification-priority" required min="0">
+                  </mat-form-field>
+
+                  <taskana-shared-field-error-display
+                    [displayError]="!isFieldValid('classification.priority')"
+                    [validationTrigger]="this.toggleValidationMap.get('classification.priority.name')"
+                    errorMessage="* Priority is required">
+                  </taskana-shared-field-error-display>
+                </div>
+              </div>
+
+              <!-- APPLICATION ENTRY POINT -->
+              <mat-form-field appearance="outline">
+                <mat-label>Application entry point</mat-label>
+                <label for="classification-application-entry-point"></label>
+                <input matInput type="text" maxlength="255"
+                       id="classification-application-entry-point"
+                       placeholder="Application entry point"
+                       [(ngModel)]="classification.applicationEntryPoint"
+                       name="classification.applicationEntryPoint" #appEntryPoint="ngModel"
+                       (input)="validateInputOverflow(appEntryPoint, 255)">
+              </mat-form-field>
+              <div *ngIf="inputOverflowMap.get(appEntryPoint.name)" class="error">{{lengthError}}</div>
+
+              <!-- CATEGORY -->
+              <mat-form-field appearance="outline">
+                <mat-label>Category</mat-label>
+                <mat-select required [(value)]="this.classification.category">
+                  <mat-select-trigger>
+                    <svg-icon
+                      class="detailed-fields__category-icon" [src]="(getCategoryIcon(this.classification.category) | async)?.name">
+                    </svg-icon>
+                    {{this.classification.category}}
+                  </mat-select-trigger>
+                  <mat-option *ngFor="let category of categories$ | async" value="{{category}}">
+                    <svg-icon class="detailed-fields__category-icon" [src]="(getCategoryIcon(category) | async)?.name"></svg-icon>
+                    {{category}}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
 
             </div>
           </div>
 
 
-            <!-- DOMAIN AND CATEGORY -->
-          <div class="classification-details__domain-and-category">
-
-            <mat-form-field class="classification-details__mat-form-field" appearance="outline">
-              <mat-label>Domain</mat-label>
-              <label for="classification-domain"></label>
-              <input matInput type="text" disabled id="classification-domain"
-                     placeholder="Domain" [(ngModel)]="classification.domain"
-                     name="classification.domain">
-            </mat-form-field>
-
-            <div class="domain-and-category__domain-checkbox">
-              Valid in Domain
-              <a *ngIf="!masterDomainSelected()" (click)="validChanged()" title="Valid in Domain">
-                <mat-icon class="domain-and-category__domain-checkbox-icon">{{classification.isValidInDomain ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
-              </a>
-            </div>
-
-            <mat-form-field appearance="outline">
-              <mat-label>Category</mat-label>
-              <mat-select required [(value)]="this.classification.category">
-                <mat-select-trigger>
-                  <svg-icon
-                    class="domain-and-category__category-icon" [src]="(getCategoryIcon(this.classification.category) | async)?.name">
-                  </svg-icon>
-                  {{this.classification.category}}
-                </mat-select-trigger>
-                <mat-option *ngFor="let category of categories$ | async" value="{{category}}">
-                  <svg-icon class="domain-and-category__category-icon" [src]="(getCategoryIcon(category) | async)?.name"></svg-icon>
-                  {{category}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
 
 
-          <!-- APPLICATION ENTRY POINT -->
-          <mat-form-field appearance="outline">
-            <mat-label>Application entry point</mat-label>
-            <label for="classification-application-entry-point"></label>
-            <input matInput type="text" maxlength="255"
-                   id="classification-application-entry-point"
-                   placeholder="Application entry point"
-                   [(ngModel)]="classification.applicationEntryPoint"
-                   name="classification.applicationEntryPoint" #appEntryPoint="ngModel"
-                   (input)="validateInputOverflow(appEntryPoint, 255)">
-          </mat-form-field>
-          <div *ngIf="inputOverflowMap.get(appEntryPoint.name)" class="error">{{lengthError}}</div>
 
-          <!-- DESCRIPTION -->
-          <mat-form-field appearance="outline">
-            <mat-label>Description</mat-label>
-            <label for="classification-description"></label>
-              <textarea matInput
-                        cdkTextareaAutosize
-                        cdkAutosizeMinRows="1"
-                        cdkAutosizeMaxRows="5"
-                        maxlength="255"
-                        id="classification-description" placeholder="Description"
-                        [(ngModel)]="classification.description"
-                        name="classification.description" #description="ngModel"
-                        (input)="validateInputOverflow(description, 255)"></textarea>
-          </mat-form-field>
-          <div *ngIf="inputOverflowMap.get(description.name)" class="error">{{lengthError}}</div>
+
 
 
           <!-- CUSTOM FIELDS -->
-          <h6 class="classification-details__subheading" style="padding-top: 50px"> Custom Fields </h6>
-            <mat-divider class="classification-details__horizontal-line"> </mat-divider>
+          <h6 class="detailed-fields__subheading" style="padding-top: 50px"> Custom Fields </h6>
+          <mat-divider class="detailed-fields__horizontal-line"> </mat-divider>
 
-
-          <div *ngFor="let customField of (customFields$ | async), let i = index" >
-            <div *ngIf="customField.visible">
-              <mat-form-field appearance="outline" style="width: 100%">
-                  <mat-label>{{customField.field}}</mat-label>
-                  <label for="classification-custom-{{i + 1}}"></label>
-                  <input matInput type="text" maxlength="255"
-                         id="classification-custom-{{i + 1}}" placeholder="{{customField.field}}"
-                         [(ngModel)]="classification[getClassificationCustom(i + 1)]"
-                         name="classification.custom{{i + 1}}" #custom="ngModel"
-                         (input)="validateInputOverflow(custom, 255)">
-              </mat-form-field>
-              <div *ngIf="inputOverflowMap.get(custom.name)" class="error">{{lengthError}}</div>
+          <div class="detailed-fields__custom-fields">
+            <div *ngFor="let customField of (customFields$ | async), let i = index" class="detailed-fields__input-custom-field">
+                <mat-form-field appearance="outline" style="width: 100%">
+                    <mat-label>{{customField.field}}</mat-label>
+                    <label for="classification-custom-{{i + 1}}"></label>
+                    <input matInput type="text" maxlength="255"
+                           id="classification-custom-{{i + 1}}" placeholder="{{customField.field}}"
+                           [(ngModel)]="classification[getClassificationCustom(i + 1)]"
+                           name="classification.custom{{i + 1}}" #custom="ngModel"
+                           (input)="validateInputOverflow(custom, 255)">
+                </mat-form-field>
+                <div *ngIf="inputOverflowMap.get(custom.name)" class="error">{{lengthError}}</div>
             </div>
           </div>
-
         </div>
       </ng-form>
     </div>
diff --git a/web/src/app/administration/components/classification-details/classification-details.component.scss b/web/src/app/administration/components/classification-details/classification-details.component.scss
index bc2539733..8cf8c7590 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.scss
+++ b/web/src/app/administration/components/classification-details/classification-details.component.scss
@@ -5,16 +5,11 @@
   overflow-y: auto;
 }
 
-.classification-details__wrapper {
+.classification-details-wrapper {
   position: relative;
 }
 
-/* ACTION TOOLBAR */
-.classification-details__headline {
-  font-size: 1.5rem;
-  padding: 0.5rem;
-}
-.classification-details__action-toolbar {
+.action-toolbar {
   padding: 8px 30px 12px 24px;
   height: 68px;
   background-color: #fff;
@@ -23,93 +18,121 @@
   justify-content: space-between;
   flex-wrap: wrap;
   z-index: 10;
+
+  &__headline {
+    font-size: 1.5rem;
+    padding: 0.5rem;
+  }
+
+  &__badge-message {
+    font-size: 13px;
+    background-color: $transparent-grey;
+  }
+
+  &__button {
+    margin-top: 0.25rem;
+    margin-right: 6px;
+    background-color: #fff;
+  }
+
+  &__dropdown {
+    border-color: $transparent-grey;
+    border-bottom-style: solid;
+    border-width: 1px;
+  }
+
+  &__save-button {
+    background-color: $aquamarine;
+    color: white;
+  }
+
+  &__aquamarine-button {
+    color: $aquamarine;
+  }
+
+  &__red-button {
+    color: $invalid;
+  }
 }
 
-.action-toolbar__button {
-  margin-top: 0.25rem;
-  margin-right: 6px;
-  background-color: #fff;
-}
-
-.action-toolbar__dropdown {
-  border-color: $transparent-grey;
-  border-bottom-style: solid;
-  border-width: 1px;
-}
-
-.action-toolbar__save-button {
-  background-color: $aquamarine;
-  color: white;
-}
-
-.button__green-blue {
-  color: $aquamarine;
-}
-
-.button__red {
-  color: $invalid;
-}
-
-/* DETAILED FIELDS */
-
-.classification__detailed-fields {
+.detailed-fields {
   padding: 15px;
   display: flex;
   flex-direction: column;
-}
 
-.classification-details__subheading {
-  font-weight: bold;
-  padding-left: 15px;
-  margin-bottom: 0;
-}
+  &__subheading {
+    font-weight: bold;
+    padding-left: 15px;
+    margin-bottom: 0;
+  }
 
-.classification-details__horizontal-line {
-  margin: 5px 5px 25px 5px;
-  border-top-color: #555;
-  border-top-width: 1.35px;
-}
+  &__horizontal-line {
+    margin: 5px 5px 25px 5px;
+    border-top-color: #555;
+    border-top-width: 1.35px;
+  }
 
-.classification-details__domain-and-category {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 16px;
-}
+  &__general {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
 
-.domain-and-category__domain-checkbox {
-  position: absolute;
-  top: 64px;
-  left: 12px;
-  font-size: 14px;
-  color: #555;
-}
-.domain-and-category__domain-checkbox-icon {
-  cursor: pointer;
-  margin-top: 2px;
-  font-size: 20px;
-}
-.domain-and-category__category-icon {
-  fill: #555;
-  margin-right: 5px;
-  top: -2px;
-}
+  &__general-right-column {
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+  }
 
-.classification-details__service-and-priority {
-  display: flex;
-  width: 100%;
-}
-.classification-details__service {
-  width: 100%;
-  margin-right: 10px;
-}
-.classification-details__priority {
-  flex-grow: 1;
-}
+  &__spacer {
+    display: block;
+    width: 20px;
+  }
 
-.classification-details__mat-form-field {
-  width: 100%;
-  margin-right: 10px;
+  &__general-left-column {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 70%;
+  }
+
+  &__domain-checkbox {
+    position: absolute;
+    top: 172px;
+    right: 12px;
+    font-size: 12px;
+    color: #555;
+  }
+
+  &__domain-checkbox-icon {
+    cursor: pointer;
+    margin-top: 2px;
+    font-size: 18px;
+  }
+
+  &__service-and-priority {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__category-icon {
+    fill: #555;
+    margin-right: 5px;
+    top: -2px;
+  }
+
+  &__custom-fields {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &__input-custom-field {
+    flex: 0 49%;
+  }
 }
 
 input:invalid.dirty {
diff --git a/web/src/app/administration/components/classification-details/classification-details.component.spec.ts b/web/src/app/administration/components/classification-details/classification-details.component.spec.ts
index a49807b83..38a05df20 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.spec.ts
+++ b/web/src/app/administration/components/classification-details/classification-details.component.spec.ts
@@ -248,21 +248,21 @@ describe('ClassificationDetailsComponent', () => {
     component.requestInProgress = true;
     component.classification = {};
     fixture.detectChanges();
-    expect(debugElement.nativeElement.querySelector('.classification-details__action-toolbar')).toBeFalsy();
-    expect(debugElement.nativeElement.querySelector('.classification__detailed-fields')).toBeFalsy();
+    expect(debugElement.nativeElement.querySelector('.action-toolbar')).toBeFalsy();
+    expect(debugElement.nativeElement.querySelector('.detailed-fields')).toBeFalsy();
   });
 
   it('should not show details when classification does not exist', () => {
     component.requestInProgress = false;
     component.classification = null;
     fixture.detectChanges();
-    expect(debugElement.nativeElement.querySelector('.classification-details__action-toolbar')).toBeFalsy();
-    expect(debugElement.nativeElement.querySelector('.classification__detailed-fields')).toBeFalsy();
+    expect(debugElement.nativeElement.querySelector('.action-toolbar')).toBeFalsy();
+    expect(debugElement.nativeElement.querySelector('.detailed-fields')).toBeFalsy();
   });
 
   it('should show details when classification exists and spinner is not running', () => {
-    expect(debugElement.nativeElement.querySelector('.classification-details__action-toolbar')).toBeTruthy();
-    expect(debugElement.nativeElement.querySelector('.classification__detailed-fields')).toBeTruthy();
+    expect(debugElement.nativeElement.querySelector('.action-toolbar')).toBeTruthy();
+    expect(debugElement.nativeElement.querySelector('.detailed-fields')).toBeTruthy();
   });
 
   /* HTML: TITLE + ACTION BUTTONS */
@@ -270,7 +270,7 @@ describe('ClassificationDetailsComponent', () => {
     component.classification = { name: 'Recommendation', type: 'DOCUMENT' };
     component.isCreatingNewClassification = true;
     fixture.detectChanges();
-    const headline = debugElement.nativeElement.querySelector('.classification-details__headline');
+    const headline = debugElement.nativeElement.querySelector('.action-toolbar__headline');
     expect(headline).toBeTruthy();
     expect(headline.textContent).toContain('Recommendation');
     expect(headline.textContent).toContain('DOCUMENT');
@@ -290,8 +290,7 @@ describe('ClassificationDetailsComponent', () => {
   });
 
   it('should restore selected classification when button is clicked', async () => {
-    const button = debugElement.nativeElement.querySelector('.classification-details__action-toolbar').children[1]
-      .children[1];
+    const button = debugElement.nativeElement.querySelector('.action-toolbar').children[1].children[1];
     expect(button).toBeTruthy();
     expect(button.textContent).toContain('Undo Changes');
     expect(button.textContent).toContain('restore');
@@ -391,7 +390,7 @@ describe('ClassificationDetailsComponent', () => {
   });
 
   it('should change isValidInDomain when button is clicked', () => {
-    const button = debugElement.nativeElement.querySelector('.domain-and-category__domain-checkbox-icon').parentNode;
+    const button = debugElement.nativeElement.querySelector('.detailed-fields__domain-checkbox-icon').parentNode;
     expect(button).toBeTruthy();
     component.classification.isValidInDomain = false;
     button.click();
diff --git a/web/src/app/administration/components/classification-details/classification-details.component.ts b/web/src/app/administration/components/classification-details/classification-details.component.ts
index 4298aa808..c586b0604 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.ts
+++ b/web/src/app/administration/components/classification-details/classification-details.component.ts
@@ -69,7 +69,8 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.customFields$ = this.store.select(EngineConfigurationSelectors.classificationsCustomisation).pipe(
       map((customisation) => customisation.information),
-      getCustomFields(customFieldCount)
+      getCustomFields(customFieldCount),
+      map((customisationFields) => customisationFields.filter((customisation) => customisation.visible))
     );
 
     this.selectedClassification$.pipe(takeUntil(this.destroy$)).subscribe((classification) => {
diff --git a/web/src/app/administration/components/classification-list/classification-list.component.html b/web/src/app/administration/components/classification-list/classification-list.component.html
index a31da5050..36bd044d3 100644
--- a/web/src/app/administration/components/classification-list/classification-list.component.html
+++ b/web/src/app/administration/components/classification-list/classification-list.component.html
@@ -23,8 +23,8 @@
     <!-- FILTER -->
     <div class="classification-list__filter" *ngIf="showFilter">
       <div class="classification-list__category-filter">
-        <button mat-icon-button class="mr-2 category-filter__filter-button" [matMenuTriggerFor]="menu"
-                matTooltip="Filter Category">
+        <button mat-icon-button [matMenuTriggerFor]="menu"
+                matTooltip="Filter Category" class="category-filter__filter-button">
           <mat-icon *ngIf="selectedCategory == ''">filter_list</mat-icon>
           <svg-icon class="category-filter__icons" [src]="(getCategoryIcon(selectedCategory) | async)?.name"
                     [title]="(getCategoryIcon(selectedCategory) | async)?.text"
@@ -34,12 +34,12 @@
 
         <mat-menu #menu="matMenu">
           <button mat-menu-item (click)="selectCategory('')" class="category-filter__all-button">
-            <svg-icon class="category-filter__categories pr-2" src="./assets/icons/asterisk.svg"
+            <svg-icon class="category-filter__categories" src="./assets/icons/asterisk.svg"
                       [title]="(getCategoryIcon('all') | async)?.text"></svg-icon>
             <span>All</span>
           </button>
           <button mat-menu-item *ngFor="let category of categories$ | async" (click)="selectCategory(category)">
-            <svg-icon class="category-filter__categories pr-2" [src]="(getCategoryIcon(category) | async)?.name"
+            <svg-icon class="category-filter__categories" [src]="(getCategoryIcon(category) | async)?.name"
                       [title]="(getCategoryIcon(category) | async)?.text"></svg-icon>
             <span> {{category}} </span>
           </button>
diff --git a/web/src/app/administration/components/classification-list/classification-list.component.scss b/web/src/app/administration/components/classification-list/classification-list.component.scss
index adc6f09a0..6e700724d 100644
--- a/web/src/app/administration/components/classification-list/classification-list.component.scss
+++ b/web/src/app/administration/components/classification-list/classification-list.component.scss
@@ -32,6 +32,7 @@
 .category-filter__icons {
   height: 33px;
   width: 16px;
+  fill: #555;
 }
 .category-filter__categories {
   fill: #555;
@@ -39,10 +40,6 @@
   top: -2px;
 }
 
-.category-filter__filter-button {
-  color: #555;
-}
-
 .filter__input {
   width: 100%;
   margin-right: 12px;
diff --git a/web/src/app/administration/components/classification-overview/classification-overview.component.scss b/web/src/app/administration/components/classification-overview/classification-overview.component.scss
index 3c918e630..0fe00eeb8 100644
--- a/web/src/app/administration/components/classification-overview/classification-overview.component.scss
+++ b/web/src/app/administration/components/classification-overview/classification-overview.component.scss
@@ -6,7 +6,7 @@
   align-items: stretch;
 }
 taskana-administration-classification-list {
-  width: 500px;
+  min-width: 500px;
 }
 taskana-administration-classification-details {
   flex-grow: 1;