improve responsiveness

src/app/shared/gabinete-digital/generic/task-details/task-details.page.html

@@ -1,7 +1,7 @@
 <ion-header *ngIf="task" class="ion-no-border">
   <div class="main-header">
     <div class="title-content width-100 d-flex justify-space-between align-center">
-      <div class=" btn-dismiss font-30 cursor-pointer" (click)="goBack.emit()" defaultHref="#">
+      <div class=" btn-dismiss font-30-rem cursor-pointer" (click)="goBack.emit()" defaultHref="#">
         <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
         <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
       </div>
@@ -33,7 +33,7 @@
 <ion-content>
   <div *ngIf="task" class="overflow-y-auto height-100">
     <div class="middle-content">
-      <h5 *ngIf="intervenientes">Intervenientes</h5>
+      <h5 class="font-17-rem" *ngIf="intervenientes">Intervenientes</h5>
       <ion-item class="ion-no-margin ion-no-padding">
         <ion-label>
           <div *ngFor="let interveniente of intervenientes">
@@ -42,7 +42,7 @@
         </ion-label>
       </ion-item>
       <div *ngIf="cc.length > 0">
-        <h5>Com conhecimento</h5>
+        <h5 class="font-17-rem">Com conhecimento</h5>
         <ion-item class="ion-no-margin ion-no-padding">
           <ion-label>
             <div *ngFor="let c of cc">
@@ -52,7 +52,7 @@
         </ion-item>
       </div>
       <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
-        <h5>Detalhes</h5>
+        <h5 class="font-17-rem">Detalhes</h5>
         <ion-item class="ion-no-margin ion-no-padding">
           <pre class="width-100 text">{{ fulltask.workflowInstanceDataFields.TaskMessage }} </pre>
         </ion-item>
@@ -60,7 +60,7 @@
     </div>
     <div class="bottom-content width-100">
       <ion-list>
-        <h5>Documentos Anexados</h5>
+        <h5 class="font-17-rem">Documentos Anexados</h5>
         <ion-item class="ion-no-margin ion-no-padding cursor-pointer" *ngFor="let Document of fulltask.Documents">
           <ion-label class="d-block" (click)="viewDocument.emit(Document.DocId)">
             <p class="attach-title-item">{{ Document.Assunto || "Sem assunto" }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>

src/app/shared/gabinete-digital/generic/task-details/task-details.page.scss

@@ -14,7 +14,7 @@
   color:#d30a0a !important;
 }
 .btn-size{
-  font-size: 18px !important;
+  font-size: rem(18) !important;
 }
 .main-header{
   display: flex;
@@ -31,14 +31,14 @@
     .title{
       width: fit-content;
       height: auto;
-      font-size: 25px;
+      font-size: rem(25);
       overflow: auto;
       float: left;
       padding-left: 5px;
     }
     .div-icon{
       width: 40px !important;
-      font-size: 35px !important;
+      font-size: rem(35) !important;
       text-align: start !important;
       padding: 1px;
     }
@@ -55,7 +55,7 @@ ion-button{
 .upper-content{
   font-family: Roboto;
   margin-left: 41px;
-  font-size: 18px;
+  font-size: rem(18);
 
   .label{
       border-radius: 20px;
@@ -63,13 +63,14 @@ ion-button{
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;
+      font-size: rem(14);
   }
 
   .button-calendar-type ion-button{
-    height: 25px;
+    height: rem(25);
   }
   .content-details{
-    font-size: 17px;
+    font-size: rem(17);
     .date{
       color: #797979;
     }
@@ -77,7 +78,7 @@ ion-button{
 }
 .middle-conten{
  .middle-content p{
-    font-size: 16px;
+    font-size: rem(16);
   }
 }
 .bottom-content{
@@ -85,11 +86,11 @@ ion-button{
   margin: 0 auto;
 
   .bottom-content h3{
-    font-size: 16px;
+    font-size: rem(16);
     margin: 0 0 0 10px;
   }
   .attach-document{
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--title-text-color);
     margin: 5px 5px 5px 10px;
     padding: 5px;
@@ -97,11 +98,11 @@ ion-button{
   }
   .attach-icon{
     width: 37px;
-    font-size: 35px;
+    font-size: rem(35);
     float: left;
   }
   .attach-title-item{
-    font-size: 18px;
+    font-size: rem(18);
     width: 100%;
     color:#0d89d1;
     padding-bottom: 5px;
@@ -109,12 +110,12 @@ ion-button{
   /* SPAN */
   .span-left{
     float: left;
-    font-size: 15x;
+    font-size: rem(15);
   }
   .span-right{
   text-align: right;
   float: right;
-  font-size: 13px;
+  font-size: rem(13);
   }
 }
 .aside-right{
@@ -128,7 +129,7 @@ ion-button{
     .arrow-right-icon{
         width: 37px;
         float: right;
-        font-size: 35px;
+        font-size: rem(35);
         overflow: hidden;
     }
   }
@@ -139,7 +140,7 @@ ion-button{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;