fix: make responsive forms of activities section #537

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

@@ -1,5 +1,5 @@
 @import '../../../../../styles/colors.scss';
 
 .activity-list {
-  overflow: auto; display:inline-block; width: 60%;
+  overflow: auto;
 }

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

@@ -1,23 +1,21 @@
 <h4>Activities</h4>
 <hr/>
-<div style="width: 60%;">
+<div>
 
   <form [formGroup]="activityForm" (ngSubmit)="onSubmit(activityForm.value)">
-    <div class="input-group input-group-sm mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text span-width">Name</span>
-      </div>
-      <input class="form-control" id="name" type="text" formControlName="name"
+    <div class="form-group">
+      <label>Name:</label>
+      <div>
+        <input class="form-control" id="name" type="text" formControlName="name"
         [class.is-invalid]="name.invalid && name.touched" required />
-      <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
-        Activity name is required.
+        <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
+          Activity name is required.
+        </div>
       </div>
     </div>
 
-    <div class="input-group input-group-sm mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text span-width">Description</span>
-      </div>
+    <div class="form-group">
+    <label for="NotesTextarea">Description:</label>
       <textarea class="form-control" rows="2" id="description" type="text" formControlName="description"></textarea>
     </div>
 

src/app/modules/activities-management/pages/activities-management.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="col-12 col-md-9 px-0">
   <app-create-activity></app-create-activity>
   <app-activity-list></app-activity-list>
 </div>

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

@@ -1,6 +1,6 @@
 <app-time-entries-summary></app-time-entries-summary>
 
-<div class="entry-container">
+<div class="col-12 col-md-9 px-0">
 
   <div class="row pb-4">
     <div class="col-12">

src/app/modules/time-clock/pages/time-clock.component.scss

@@ -12,13 +12,3 @@
   background-color: $primary;
   color: white;
 }
-
-.entry-container{
-  width: 100%;
-}
-
-@media (min-width: 992px) {
-  .entry-container{
-    width: 70%;
-  }
-}