fix: TT-144 Responsive all tables

Author: jr-98

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -1,18 +1,18 @@
 <div class="activity-list">
-  <table class="table table-sm table-bordered table-striped">
+  <table class="table table-responsive-sm table-bordered table-striped">
     <thead class="thead-blue">
       <tr class="d-flex">
-        <th class="col-4">Activity ID</th>
-        <th class="col-5">Activity</th>
+        <th class="col-4 text-center">Activity ID</th>
+        <th class="col-5 text-center">Activity</th>
         <th class="col-3 text-center">Options</th>
       </tr>
     </thead>
     <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
     <tbody *ngIf="(isLoading$ | async) === false">
       <tr class="d-flex" *ngFor="let activity of activities">
-        <td class="col-sm-4">{{ activity.id }}</td>
-        <td class="col-sm-5">{{ activity.name }}</td>
-        <td class="col-sm-3 text-center">
+        <td class="col-4 text-break">{{ activity.id }}</td>
+        <td class="col-5 ">{{ activity.name }}</td>
+        <td class="col-3 text-center">
           <button
             type="button"
             class="btn btn-sm btn-primary"

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -1,7 +1,7 @@
 <div class="row mt-5">
-  <div class="col">
+  <div class="table-responsive-sm">
     <table
-      class="table table-sm table-striped"
+      class="table table-sm table-striped mb-0"
       datatable
       [dtTrigger]="dtTrigger"
       [dtOptions]="dtOptions"

src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss

@@ -26,3 +26,8 @@
 .hidden-col{
   display: none;
 }
+.table.dataTable th,
+.table.dataTable td {
+  box-sizing: border-box;
+  width: auto;
+}

src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts

@@ -17,7 +17,8 @@ import { getReportDataSource } from '../../../time-clock/store/entry.selectors';
 })
 export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewInit {
   dtOptions: any = {
-    scrollY: '600px',
+    scrollY: '590px',
+    scrollX: '500px',
     paging: false,
     dom: 'Bfrtip',
     buttons: [

src/app/modules/reports/components/time-range-form/time-range-form.component.html

@@ -1,5 +1,4 @@
 <form [formGroup]="reportForm" (ngSubmit)="onSubmit()">
-
   <div class="form-group row">
     <label class="col-12 col-md-2 col-form-label my-1">Start date:</label>
     <div class="col-12 col-sm-6 col-md-3 my-1">

src/app/modules/time-entries/pages/time-entries.component.html

@@ -25,7 +25,7 @@
         <th class="col">Customer</th>
         <th class="col">Project</th>
         <th class="col">Activity</th>
-        <th class="col"></th>
+        <th class="col">Options</th>
       </tr>
     </thead>
     <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>

src/app/modules/time-entries/pages/time-entries.component.ts

@@ -128,13 +128,13 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       if (dataToUse && this.isNewEntry()) {
         const startDate = new Date(new Date().setHours(0, 0, 0, 0));
         const entry = {
-          description : dataToUse.description ? dataToUse.description : '',
-          technologies : dataToUse.technologies ? dataToUse.technologies : [],
-          uri : dataToUse.uri ? dataToUse.uri : '',
-          activity_id : dataToUse.activity_id,
-          project_id : dataToUse.project_id,
-          start_date : startDate,
-          end_date : startDate
+          description: dataToUse.description ? dataToUse.description : '',
+          technologies: dataToUse.technologies ? dataToUse.technologies : [],
+          uri: dataToUse.uri ? dataToUse.uri : '',
+          activity_id: dataToUse.activity_id,
+          project_id: dataToUse.project_id,
+          start_date: startDate,
+          end_date: startDate
         };
         this.entry = entry;
       }