fix manager sync error and failed states && fix hanging div

Author: Mutugiii

src/app/manager-dashboard/manager-sync.component.html

@@ -23,7 +23,13 @@ <h3 matListItemTitle>
         <span matListItemMeta>
           @switch (rep?.state) {
             <!-- States: initializing, failed, error, running, pending, crashing, completed -->
-            @case ('crashing' || 'error' || 'failed') {
+            @case ('crashing') {
+              <mat-icon class="warn-text-color" i18n-title title="Error">error</mat-icon>
+            }
+            @case ('error') {
+              <mat-icon class="warn-text-color" i18n-title title="Error">error</mat-icon>
+            }
+            @case ('failed') {
               <mat-icon class="warn-text-color" i18n-title title="Error">error</mat-icon>
             }
             @case ('running') {

src/app/shared/calendar.component.ts

@@ -26,14 +26,12 @@ import { FullCalendarModule } from '@fullcalendar/angular';
     @if (showLegend) {
       <div class="calendar-legend">
         @for (legend of eventLegend; track legend) {
-          <div>
-            @if (!legend.type || legend.type === type) {
-              <div class="legend-item">
-                <div class="legend-color" [style.backgroundColor]="legend.color"></div>
-                <span>{{ legend.label }}</span>
-              </div>
-            }
-          </div>
+          @if (!legend.type || legend.type === type) {
+            <div class="legend-item">
+              <div class="legend-color" [style.backgroundColor]="legend.color"></div>
+              <span>{{ legend.label }}</span>
+            </div>
+          }
         }
       </div>
     }