Improve responsiveness and add doc to task

src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html

@@ -1,11 +1,11 @@
 <ion-header class="ion-no-border">
-  <div class="header-content  mx-20 d-flex justify-start">
+  <div class="header-content  mx-20 d-flex justify-between">
     <div class="header-icon-left">
       <button class="btn-no-color" (click)="close()">
         <ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
       </button>
     </div>
-    <div class="header-title flex-md-grow-1">
+    <div class="header-title flex-grow-1">
       <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
     </div>
     <div class="header-icon-right">
@@ -38,23 +38,24 @@
 </ion-menu>
 
 <ion-content id="main-content">
-  <div class="upper-content">
-    <div class="content-location">
-      <div class="location-detail">
+  <div class="upper-content d-flex width-100">
+    <div class="content-location d-flex justify-between width-100">
+      <div class="location-detail flex-grow-1">
         <ion-label >{{loadedEvent.workflowInstanceDataFields.Location}}</ion-label>
+        <div class="content-details">
+          <ion-label>
+            <p>1 {{customDate}}</p>
+            <p>2 das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+            <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">3 (Não se repete)</p>
+            <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">4 Repete</p>
+          </ion-label>
+        </div>
       </div>
-      <div class="button-calendar-type">
+      <div class="button-calendar-type d-flex flex-grow-1 justify-end">
         <ion-button  class="button-calendar-type" slot="end">{{loadedEvent.workflowInstanceDataFields.Agenda}}</ion-button>
       </div>
     </div>
-    <div class="content-details">
-      <ion-label>
-        <p>{{customDate}}</p>
-        <p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
-        <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
-        <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
-      </ion-label>
-    </div>
+
   </div>
   <div class="middle-content">
     <div *ngIf="loadedEvent.workflowInstanceDataFields.Participants">

src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss

@@ -18,7 +18,6 @@ ion-menu{
   float: left;
 }
 .header-title{
-  width: 264px;
   font-family: Roboto;
   font-size: 25px;
   margin: 0 5px 0 5px;
@@ -33,19 +32,17 @@ ion-menu{
   overflow: auto;
 }
 .upper-content{
-  margin-left: 50px;
+  padding-left: 50px;
   overflow: auto;
   font-size: 18px;
 
   .content-location{
-    width: 360px;
     margin: 0 auto;
     padding: 0;
     overflow: auto;
   }
 
   .location-detail{
-    width: 210px;
     font-weight: 700;
     font-size: 18px;
     float: left;
@@ -79,7 +76,6 @@ ion-menu{
 }
 
 .bottom-content{
-  width: 360px;
   margin: 0 auto;
   
   .bottom-content h3{

src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.ts

@@ -38,14 +38,14 @@ export class ApproveEventModalPage implements OnInit {
     private activatedRoute: ActivatedRoute,
   ) {
     this.activatedRoute.paramMap.subscribe(paramMap =>
-      {
-        if (!paramMap.has("serialNumber")){
-          return;
-        }
-        else{
-          this.serialNumber = paramMap.get('serialNumber'); 
-        }
-      });
+    {
+      if (!paramMap.has("serialNumber")){
+        return;
+      }
+      else{
+        this.serialNumber = paramMap.get('serialNumber'); 
+      }
+    });
   }
 
   ngOnInit() {

src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html

@@ -1,9 +1,9 @@
 <ion-header class="ion-no-border">
-  <div *ngIf="loadedEvent" class="header-content">
+  <div *ngIf="loadedEvent" class="header-content d-flex justify-between">
     <div class="header-icon-left">
       <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
     </div>
-    <div class="header-title">
+    <div class="header-title flex-grow-1">
       <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
     </div>
     <div class="header-icon-right">
@@ -55,7 +55,7 @@
     </div>
   </div>
   <div class="line"></div>
-  <div class="middle-content" *ngIf="loadedEvent">
+  <div class="middle-content overflow-y-auto" *ngIf="loadedEvent">
     <h5>Intervenientes</h5>
     <ion-item>
       <ion-label>