responsive

src/app/components/add-task/add-task.component.html

@@ -124,7 +124,12 @@
       </div>
       <div class="middle-spacer"><div class="line"></div></div>
       <div class="right-side">
-        <div class="date">
+        <div
+          class="date"
+          [ngStyle]="{
+            'margin-top': overlayMobile ? '28px' : ''
+          }"
+        >
           <p>Due date<span class="red-dot">*</span></p>
           <input
             type="date"

src/app/components/add-task/add-task.component.scss

@@ -30,7 +30,7 @@ section {
 }
 
 .edit-task-overlay-content-mobile {
-  height: calc(100% - 24px);
+  height: 100%;
   padding: 0 6px;
   overflow-y: auto;
   background-color: var(--very-light-gray);
@@ -125,7 +125,8 @@ p {
 
 .assigned-badget {
   display: flex;
-  margin-top: 6px;
+  align-items: center;
+  margin: 6px;
   height: 40px;
 }
 
@@ -276,7 +277,7 @@ p {
 .form-buttons {
   display: flex;
   justify-content: end;
-  padding-top: 12px;
+  padding: 12px 0;
 }
 
 /*------------- RESPONSIVE -------------*/
@@ -289,7 +290,7 @@ p {
   }
 }
 
-@media screen and (max-width: 750px) {
+@media screen and (max-width: 1050px) {
   .btn-text {
     span {
       display: block;

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss

@@ -7,7 +7,7 @@
 }
 
 .overlay-mobile {
-  height: calc(100% - 24px);
+  height: 100%;
   width: 100%;
 }
 
@@ -15,3 +15,11 @@
   display: flex;
   justify-content: right;
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 1050px) {
+  .overlay {
+    width: calc(100vw - 124px);
+  }
+}

src/app/shared/components/overlay/task-overlay/task-overlay.component.scss

@@ -7,7 +7,7 @@
 }
 
 .overlay-mobile {
-  height: calc(100% - 24px);
+  height: 100%;
 }
 
 .header {