Corrección desbordamiento órdenes de trabajo activas

sistema-mantenimiento-front/src/app/components/preventive-maintenance/active-orders/active-orders.component.html

@@ -36,36 +36,43 @@
     </mat-button-toggle-group>
   </div>
   <div class="active-orders-table-container animated fadeIn" [ngClass]="{ hidden: displayedScreen != 'ORTTRA' }">
-    <mat-card class="override-elevation-z8">
-      <mat-card-title style="padding: 15px 0;text-align: center;">Órdenes de trabajo activas</mat-card-title>
-      <div class="active-orders-table-content-container">
-        <div class="active-orders-table-actions-container">
-          <mat-form-field appearance="outline" class="w-300p mr-8 ml-16">
-            <mat-label>Buscador</mat-label>
-            <input matInput [(ngModel)]="txtBuscador" (keyup)="applyFilter($event,'INP')"
+    <mat-card class="override-card override-elevation-z8">
+      <section class="override-section">
+        <nav class="override-nav">
+          <mat-card-title class="mat-card-title centre">Órdenes de trabajo activas</mat-card-title>
+          <div class="override-actions">
+            <mat-form-field appearance="outline" class="w-300p mr-8 ml-16">
+              <mat-label>Buscador</mat-label>
+              <input matInput [(ngModel)]="txtBuscador" (keyup)="applyFilter($event,'INP')"
               placeholder="Ingrese la palabra a buscar" />
-            <mat-icon *ngIf="txtBuscador.length === 0" matSuffix>search</mat-icon>
-            <mat-icon *ngIf="txtBuscador.length > 0" class="clickable" matTooltip="Eliminar filtro"
+              <mat-icon *ngIf="txtBuscador.length === 0" matSuffix>search</mat-icon>
+              <mat-icon *ngIf="txtBuscador.length > 0" class="clickable" matTooltip="Eliminar filtro"
               (click)="applyFilter('', 'EST')" matSuffix>close</mat-icon>
-          </mat-form-field>
-          <div class="separator"></div>
-          <button mat-raised-button class="override_no_shadow mr-10 animated fadeIn" color="primary" (click)="registerVisit()">
-            <mat-icon>add</mat-icon> Registrar visita no programada
-          </button>
-          <button mat-mini-fab class="cyan_dark_background white_font override_no_shadow mr-10" matTooltip="Actualizar datos" (click)="getActiveWorkOrders()">
-            <mat-icon>refresh</mat-icon>
-          </button>
-        </div>
-
-        <div>
-          <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
-            <mat-spinner align="center"></mat-spinner>
-            <h3>Cargando datos ...</h3>
+            </mat-form-field>
+            <div class="override-buttons">
+              <button mat-raised-button class="override_no_shadow mr-10 animated fadeIn" color="primary" (click)="registerVisit()">
+                <mat-icon>add</mat-icon> Registrar visita no programada
+              </button>
+              <button mat-mini-fab class="cyan_dark_background white_font override_no_shadow mr-10" matTooltip="Actualizar datos" (click)="getActiveWorkOrders()">
+                <mat-icon>refresh</mat-icon>
+              </button>
+            </div>
           </div>
+        </nav>
+
+        <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
+          <mat-spinner align="center"></mat-spinner>
+          <h3>Cargando datos ...</h3>
+        </div>
+  
+        <div class="is-loading animated fadeIn fast" *ngIf="!isLoading && hasError">
+          <mat-icon style="transform: scale(4.5);margin: 45px 0;" class="red_primary_font">error</mat-icon>
+          <h3>{{ errorStr }}</h3>
         </div>
-        
-        <div class="active-orders-table animated fadeIn" [ngClass]="{ hidden: isLoading || hasError }">  
-          <table mat-table [dataSource]="dataSource!" matSort>
+
+        <div class="override-table" [ngClass]="{ hidden: isLoading || hasError }">
+          <table mat-table [dataSource]="dataSource!" matSort class="animated fadeIn" 
+          [style.display]="!isLoading && !hasError ? 'revert' : 'none'">
             <ng-container matColumnDef="ID">
               <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
               <td mat-cell *matCellDef="let row">{{ row.IDORDEN }}</td>
@@ -130,10 +137,8 @@
             </tr>
           </table>
         </div>
-
-        <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator animated fadeIn" 
-        [ngClass]="{ hidden: isLoading || hasError }"></mat-paginator>
-      </div>
+      </section>
+      <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator"></mat-paginator>
     </mat-card>
   </div>
   <div class="animated fadeIn" [ngClass]="{ hidden: displayedScreen != 'CALEJE', executions_calendar_flex_container: !floatToolbar,