From 042c52ef8068919fba26fffc54eb377b5971109b Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Thu, 25 Apr 2024 11:30:55 +0200
Subject: [PATCH] responsive

---
 src/app/components/add-task/add-task.component.html    |  7 ++++++-
 src/app/components/add-task/add-task.component.scss    |  9 +++++----
 .../task-edit-overlay/task-edit-overlay.component.scss | 10 +++++++++-
 .../overlay/task-overlay/task-overlay.component.scss   |  2 +-
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html
index 21d259d..9b84dc2 100644
--- a/src/app/components/add-task/add-task.component.html
+++ b/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"
diff --git a/src/app/components/add-task/add-task.component.scss b/src/app/components/add-task/add-task.component.scss
index 03ed8c1..31aaf1f 100644
--- a/src/app/components/add-task/add-task.component.scss
+++ b/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;
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
index 349846c..d22866c 100644
--- a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
+++ b/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);
+  }
+}
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
index 8f0b4b8..ed6b8ff 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
@@ -7,7 +7,7 @@
 }
 
 .overlay-mobile {
-  height: calc(100% - 24px);
+  height: 100%;
 }
 
 .header {