css styling

frontend/src/app/language.service.ts

@@ -33,7 +33,7 @@ export class LanguageService {
     this.deMap.set('routeScheduled', "Geplant"); this.enMap.set('routeScheduled', 'Scheduled');
     this.deMap.set('routeCancelled', "Storniert"); this.enMap.set('routeCancelled', 'Cancelled');
     this.deMap.set('routeCFRR', "Fertiggestellt (Endüberprüfung Erforderlich)"); this.enMap.set('routeCFRR', 'Completed (final review required)');
-    this.deMap.set('routeFRF', "Fertiggestellt (Endüberprüfung Abgeschlossen)"); this.enMap.set('routeFRF', 'Cimpleted (final review finished)');
+    this.deMap.set('routeFRF', "Fertiggestellt (Endüberprüfung Abgeschlossen)"); this.enMap.set('routeFRF', 'Completed (final review finished)');
     this.deMap.set('routeClosed', "Abgeschlossen"); this.enMap.set('routeClosed', 'Closed');
     this.deMap.set('routeRB', "Abgelehnt (Beginn)"); this.enMap.set('routeRB', 'Rejected (begin)');
     this.deMap.set('routeRE', "Abgelehnt (Ende)"); this.enMap.set('routeRE', 'Rejected (end)');

frontend/src/app/ntt-gantt/ntt-gantt.component.css

@@ -458,11 +458,12 @@
   width: 100%;
   font-family: Arial, sans-serif;
   font-size: 13px;
-  display: flex;
-  flex-direction: column;
   gap: 4px;
   background-color: rgb(210, 217, 224);
   padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .inner-legend {
@@ -473,10 +474,13 @@
   border-radius: 50px;
   background-color: aliceblue;
   width: fit-content;
+  white-space: nowrap;
 }
 
 .route {
   height: 12px;
   width: 12px;
+  min-width: 12px;
+  min-height: 12px;
   transform: rotate(45deg);
 }

frontend/src/app/ntt-gantt/ntt-gantt.component.html

@@ -57,48 +57,7 @@
   </div>
 </div>
 
-<div class="legend">
+
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f83200;"></div>
-    {{languageService.lMap.get('routeDraft')}}
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f98700;"></div>
-    {{languageService.lMap.get('routeRFA')}}
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f98700;"></div>
-    {{languageService.lMap.get('routePIP')}}
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f4fa00;"></div>
-    {{languageService.lMap.get('routeScheduled')}}
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #f4fa00;"></div>
-    {{languageService.lMap.get('routeCancelled')}}
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #008642;"></div>
-    {{languageService.lMap.get('routeCFRR')}}
-  </div> 
-  <div class="inner-legend">
-    <div class="route" style="background-color: #32cd32;"></div>
-    {{languageService.lMap.get('routeFRF')}}
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #ffffff;"></div>
-    {{languageService.lMap.get('routeClosed')}}
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #d3d3d3;"></div>
-    {{languageService.lMap.get('routeRB')}}
-  </div>
-  <div class="inner-legend">
-    <div class="route" style="background-color: #808080;"></div>
-    {{languageService.lMap.get('routeRE')}}
-  </div>
-</div>
 
 
 
@@ -274,6 +233,49 @@
   [pageIndex]="0" aria-label="Seite auswählen">
 </mat-paginator>
 
+<div class="legend">
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f83200;"></div>
+    {{languageService.lMap.get('routeDraft')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f98700;"></div>
+    {{languageService.lMap.get('routeRFA')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f98700;"></div>
+    {{languageService.lMap.get('routePIP')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f4fa00;"></div>
+    {{languageService.lMap.get('routeScheduled')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f4fa00;"></div>
+    {{languageService.lMap.get('routeCancelled')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #008642;"></div>
+    {{languageService.lMap.get('routeCFRR')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #32cd32;"></div>
+    {{languageService.lMap.get('routeFRF')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #ffffff;"></div>
+    {{languageService.lMap.get('routeClosed')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #d3d3d3;"></div>
+    {{languageService.lMap.get('routeRB')}}
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #808080;"></div>
+    {{languageService.lMap.get('routeRE')}}
+  </div>
+</div>
+
 <mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
   <mat-card-header>
     <mat-card-title><mat-icon style="color: red;">error</mat-icon>