Change design for datatable

src/app/core/containers/app.component.html

@@ -2,7 +2,7 @@
     <app-anis-nav [isAuthenticated]="isAuthenticated | async" [loginToken]="loginToken | async" (logout)="logout()">
     </app-anis-nav>
 </header>
-<main role="main" class="container flex-shrink-0 pb-4">
+<main role="main" class="container-fluid pb-4">
     <router-outlet></router-outlet>
 </main>
 <footer class="footer mt-auto bg-light">

src/app/search/components/progress.component.css

@@ -91,15 +91,15 @@
 }
 
 .datasetStep {
-    width: 10%;
+    width: 11%;
 }
 
 .criteriaStep {
-    width: 35%;
+    width: 36%;
 }
 
 .outputStep {
-    width: 60%;
+    width: 61%;
 }
 
 .resultStep {

src/app/search/containers/criteria.component.html

@@ -5,7 +5,7 @@
 </div>
 <div *ngIf="(criteriaSearchMetaIsLoaded | async) && (datasetSearchMetaIsLoaded | async) && (attributeSearchMetaIsLoaded | async)"
     class="row mt-4">
-    <div class="col-12 col-md-8">
+    <div class="col-12 col-md-8 col-lg-9">
         <app-criteria-tabs 
             [criteriaFamilyList]="criteriaFamilyList | async"
             [datasetAttributeList]="datasetAttributeList | async" 
@@ -14,7 +14,7 @@
             (deleteCriterion)="deleteCriterion($event)">
         </app-criteria-tabs>
     </div>
-    <div class="col-12 col-md-4 pt-2">
+    <div class="col-12 col-md-4 col-lg-3 pt-2">
         <app-summary 
             [datasetName]="datasetName | async" 
             [currentStep]="currentStep | async"

src/app/search/containers/dataset.component.html

@@ -3,7 +3,7 @@
     <span class="sr-only">Loading...</span>
 </div>
 <div *ngIf="datasetSearchMetaIsLoaded | async" class="row mt-4">
-    <div class="col-12 col-md-8">
+    <div class="col-12 col-md-8 col-lg-9">
         <app-dataset-tabs
             [projectList]="projectList | async" 
             [datasetList]="datasetList | async"
@@ -12,7 +12,7 @@
             (select)="selectDataset($event)">
         </app-dataset-tabs>
     </div>
-    <div class="col-12 col-md-4 pt-2">
+    <div class="col-12 col-md-4  col-lg-3 pt-2">
         <div *ngIf="attributeSearchMetaIsLoading | async" class="row justify-content-center mt-5">
             <span class="fas fa-circle-notch fa-spin fa-3x"></span>
             <span class="sr-only">Loading...</span>

src/app/search/containers/output.component.html

@@ -5,7 +5,7 @@
 </div>
 <div *ngIf="(outputSearchMetaIsLoaded | async) && (datasetSearchMetaIsLoaded | async) && (attributeSearchMetaIsLoaded | async)"
     class="row mt-4">
-    <div class="col-12 col-md-8">
+    <div class="col-12 col-md-8 col-lg-9">
         <app-output-tabs 
             [outputFamilyList]="outputFamilyList | async" 
             [categoryList]="categoryList | async"
@@ -14,7 +14,7 @@
             (changed)="updateOutputList($event)">
         </app-output-tabs>
     </div>
-    <div class="col-12 col-md-4 pt-2">
+    <div class="col-12 col-md-4 col-lg-3 pt-2">
         <app-summary 
             [datasetName]="datasetName | async" 
             [currentStep]="currentStep | async"

src/app/search/containers/result.component.html

@@ -4,7 +4,7 @@
     <span class="sr-only">Loading...</span>
 </div>
 <div *ngIf="(datasetSearchMetaIsLoaded | async) && (attributeSearchMetaIsLoaded | async)" class="row mt-4">
-    <div class="col-12 col-md-8">
+    <div class="col-12 col-md-8 col-lg-9">
             <app-url-display
             [apiPath]="apiPath"
             [instanceName]="instanceName"
@@ -30,7 +30,7 @@
             (executeProcess)="executeProcess($event)">
         </app-datatable>
     </div>
-    <div class="col-12 col-md-4 pt-2">
+    <div class="col-12 col-md-4 col-lg-3 pt-2">
         <app-summary 
             [datasetName]="datasetName | async" 
             [currentStep]="currentStep | async"

src/app/search/containers/search.component.html

-<app-progress
-    [currentStep]="currentStep | async"
-    [datasetName]="datasetName | async"
-    [criteriaStepChecked]="criteriaStepChecked | async"
-    [outputStepChecked]="outputStepChecked | async"
-    [resultStepChecked]="resultStepChecked | async"
-    [queryParams]="queryParams | async">
-</app-progress>
-<router-outlet></router-outlet>
\ No newline at end of file
+<div class="mx-5 px-5">
+    <app-progress
+        [currentStep]="currentStep | async"
+        [datasetName]="datasetName | async"
+        [criteriaStepChecked]="criteriaStepChecked | async"
+        [outputStepChecked]="outputStepChecked | async"
+        [resultStepChecked]="resultStepChecked | async"
+        [queryParams]="queryParams | async">
+    </app-progress>
+    <router-outlet></router-outlet>
+</div>
\ No newline at end of file