fix: make responsive forms of activities section #537

Author: Angeluz-07

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="activity-container">
   <app-create-activity></app-create-activity>
   <app-activity-list></app-activity-list>
 </div>

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

@@ -0,0 +1,9 @@
+.activity-container{
+    width: 100%;
+}
+
+@media (min-width: 992px) {
+    .activity-container{
+        width: 70%;
+    }
+}