Improve admin tables responsive

2 files changed, 13 insertions, 10 deletions

diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index 021e4f8d0..5701172cb 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -107,6 +107,7 @@
               <ng-container *ngIf="jobType === 'all'" i18n>No jobs found.</ng-container>
               <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found.</ng-container>
             </ng-container>
+
             <ng-container *ngIf="jobState !== 'all'">
               <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
               <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 5e0075a27..4d564f4b7 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -5,18 +5,20 @@
   min-width: 120px;
 }
 
-.job-id {
-  max-width: 30vw !important;
-}
+@media screen and (min-width: $primeng-breakpoint) {
+  .job-id {
+    max-width: 30vw !important;
+  }
 
-.job-type,
-.job-state,
-.job-priority {
-  width: 150px !important;
-}
+  .job-type,
+  .job-state,
+  .job-priority {
+    width: 150px !important;
+  }
 
-.job-date {
-  width: 170px !important;
+  .job-date {
+    width: 170px !important;
+  }
 }
 
 .admin-sub-header {