style(audit-trails): align search filters inside one box layout (#2904)

src/app/system/audit-trails/audit-trails.component.html

@@ -5,7 +5,9 @@
   </button>
 </div>
 
-<div class="container layout-row-wrap gap-8px responsive-column">
+<mat-card class="container audit-filters-card">
+  <mat-card-content>
+    <div class="layout-row-wrap gap-8px responsive-column">
       <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Resource ID' | translate }}</mat-label>
         <input matInput [formControl]="resourceId" />
@@ -101,7 +103,14 @@
 
         <mat-form-field class="flex-38">
           <mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label>
-      <input matInput type="time" step="1" [formControl]="checkedFromTime" placeholder="HH:MM:SS" class="time-input" />
+          <input
+            matInput
+            type="time"
+            step="1"
+            [formControl]="checkedFromTime"
+            placeholder="HH:MM:SS"
+            class="time-input"
+          />
         </mat-form-field>
       </div>
 
@@ -122,10 +131,19 @@
 
         <mat-form-field class="flex-38">
           <mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label>
-      <input matInput type="time" step="1" [formControl]="checkedToTime" placeholder="HH:MM:SS" class="time-input" />
+          <input
+            matInput
+            type="time"
+            step="1"
+            [formControl]="checkedToTime"
+            placeholder="HH:MM:SS"
+            class="time-input"
+          />
         </mat-form-field>
       </div>
     </div>
+  </mat-card-content>
+</mat-card>
 
 <!-- Autocomplete data -->
 <mat-autocomplete autoActiveFirstOption #userNameAutocomplete="matAutocomplete" [displayWith]="displayUserName">

src/app/system/audit-trails/audit-trails.component.scss

@@ -16,3 +16,8 @@ table {
 .gap-8px {
   gap: 8px;
 }
+
+.audit-filters-card {
+  margin-bottom: 1.5rem;
+  padding: 0.75rem 1rem;
+}