feat: make TaskOverlayComponent responsive

src/app/services/auth.service.ts

@@ -217,10 +217,13 @@ export class LoginService {
   }
 
   // FORGOT PASSWORD
-
   passwordReset(email: string) {
     const auth = getAuth();
-    sendPasswordResetEmail(auth, email)
+    const actionCodeSettings = {
+      url: 'https://join.andre-kempf.com/',
+      handleCodeInApp: true,
+    };
+    sendPasswordResetEmail(auth, email, actionCodeSettings)
       .then(() => {
         this.router.navigate(['/login/notice/pw-send']);
         this.sharedService.isBtnDisabled = false;

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

@@ -1,7 +1,7 @@
 .overlay {
   width: 525px;
   height: 700px;
-  padding: 48px 40px 48px 40px;
+  padding: 48px 40px;
   border-radius: 30px;
   background-color: var(--white);
   box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
@@ -50,7 +50,7 @@
   font-size: 20px;
   font-weight: 400;
   margin-top: 32px;
-  width: 100%;
+  width: 99%;
   word-wrap: break-word;
 }
 
@@ -254,9 +254,22 @@
 
 /*------------- RESPONSIVE -------------*/
 
+@media screen and (max-height: 800px) {
+  .content {
+    height: calc(580px - 114px);
+    padding-right: 12px;
+    overflow-y: auto;
+  }
+}
+
 @media screen and (max-width: 650px) {
+  .overlay {
+    width: 80vw;
+    padding: 24px 20px;
+  }
+
   .headline {
-    font-size: 36px;
+    font-size: 26px;
   }
 
   .description,
@@ -267,18 +280,27 @@
     font-size: 16px;
   }
 
-  .subtasks,
+  .subtasks p,
-  .assigned,
+  .assigned p,
-  .date,
+  .date p,
-  .priority {
+  .priority p,
-    p {
+  .creator p,
+  .subtask p {
     font-size: 16px;
   }
 }
-}
 
 @media screen and (max-width: 450px) {
-  .notice {
+  .notice p {
     font-size: 14px;
   }
+
+  .overlay {
+    width: 75vw;
+  }
+
+  .priority p,
+  .date p {
+    width: 90px;
+  }
 }