style: adjust SCSS media queries for responsive design

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

@@ -261,6 +261,16 @@ select:valid {
     width: calc(100%);
   }
 }
+
+@media screen and (max-width: 950px) {
+  .header {
+    margin-bottom: 24px;
+    .title {
+      font-size: 50px;
+    }
+  }
+}
+
 @media screen and (max-width: 560px) {
   .btn-text {
     span {
@@ -268,19 +278,3 @@ select:valid {
     }
   }
 }
-
-@media screen and (max-width: 480px) {
-  .headline {
-    margin-bottom: 24px;
-    .title {
-      font-size: 47px;
-      font-weight: 700;
-    }
-  }
-
-  input,
-  textarea,
-  select {
-    font-size: 16px;
-  }
-}

src/app/components/board/board.component.scss

@@ -149,7 +149,7 @@ d-none {
 
 /*------------- RESPONSIVE -------------*/
 
-@media screen and (max-width: 1100px) {
+@media screen and (max-width: 950px) {
   .search {
     .search-inner {
       input {
@@ -157,30 +157,22 @@ d-none {
       }
     }
   }
-}
 
-@media screen and (max-width: 1020px) {
-  .search {
-    .search-inner {
-      input {
-        width: 150px;
+  .btn {
+    padding: 0;
+    img {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
+    span {
+      display: none;
     }
   }
 
   .title {
     font-size: 50px;
   }
-}
-
-@media screen and (max-width: 910px) {
-  .search {
-    .search-inner {
-      input {
-        width: 280px;
-      }
-    }
-  }
 
   .status {
     justify-content: center;
@@ -209,14 +201,8 @@ d-none {
 
   .btn {
     position: absolute;
-    top: -75px;
+    top: -70px;
     right: 0px;
-    width: 40px;
-    height: 40px;
-    padding: 3px;
-    span {
-      display: none;
-    }
   }
 }
 

src/app/components/contacts/contacts.component.html

@@ -61,6 +61,7 @@
           </div>
         </div>
       </div>
+      <div class="spacer"></div>
       } }
     </div>
   </div>

src/app/components/contacts/contacts.component.scss

@@ -64,7 +64,7 @@
   font-size: 20px;
   font-weight: 400;
   padding-left: 32px;
-  margin: 32px 0 12px 0;
+  margin-bottom: 12px;
 }
 
 .line {
@@ -74,6 +74,10 @@
   background-color: var(--light-gray);
 }
 
+.spacer {
+  margin: 6px;
+}
+
 .contact {
   display: flex;
   align-items: center;
@@ -165,7 +169,7 @@
   }
 }
 
-@media screen and (max-width: 1150px) {
+@media screen and (max-width: 950px) {
   .left-frame {
     right: 0;
     width: auto;
@@ -175,7 +179,7 @@
 
   .right-frame {
     top: 96px;
-    left: 232px;
+    left: 60px;
     bottom: 0;
     right: 0;
   }
@@ -187,17 +191,17 @@
   }
 }
 
-@media screen and (max-width: 910px) {
+@media screen and (max-width: 700px) {
   .left-frame {
     top: 80px;
-    left: 0;
+    left: 60px;
     bottom: 80px;
     padding: 0;
   }
 
   .right-frame {
     top: 80px;
-    left: 0;
+    left: 60px;
     bottom: 80px;
   }
 
@@ -217,9 +221,14 @@
     height: 56px;
     width: 56px;
     border-radius: 100%;
+    padding: 0 0 0 12px;
+    margin: 0;
     z-index: 1;
     cursor: pointer;
     img {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       padding: 0;
       width: 32px;
       height: 32px;
@@ -227,9 +236,18 @@
   }
 }
 
-@media screen and (max-width: 450px) {
+@media screen and (max-width: 700px) {
+  .left-frame,
   .right-frame {
-    padding: 16px;
+    left: 0;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .content,
+  .contact,
+  .right-frame {
+    padding: 12px;
   }
 
   .first-letter {
@@ -238,10 +256,6 @@
     }
   }
 
-  .contact {
-    padding: 16px 0;
-  }
-
   .first-letter {
     padding-left: 16px;
   }

src/app/components/contacts/contacts.component.ts

@@ -16,6 +16,8 @@ import { UpdateNotifierService } from '../../services/update-notifier.service';
   styleUrl: './contacts.component.scss',
 })
 export class ContactsComponent implements OnInit, OnDestroy {
+  private readonly CONTACT_VIEW_BREAKPOINT = 950;
+
   allUsers: User[] = [];
   currentUser: User | null = null;
   selectedUserId: string | null = null;
@@ -132,7 +134,10 @@ export class ContactsComponent implements OnInit, OnDestroy {
 
   @HostListener('window:resize', ['$event'])
   onResize() {
-    if (window.innerWidth <= 1000 && this.selectedUserId != undefined) {
+    if (
+      window.innerWidth <= this.CONTACT_VIEW_BREAKPOINT &&
+      this.selectedUserId != undefined
+    ) {
       this.showAllUsers = false;
     } else {
       this.showAllUsers = true;

src/app/components/main-layout/main-layout.component.scss

@@ -55,14 +55,21 @@ app-sidebar-mobile {
   }
 }
 
-@media screen and (max-width: 910px) {
+@media screen and (max-width: 800px) {
   .main-content {
     padding: 32px;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .main-content {
+    top: 80px;
     left: 0;
     bottom: 80px;
   }
 
   app-header {
+    height: 80px;
     left: 0;
   }
 
@@ -71,16 +78,6 @@ app-sidebar-mobile {
   }
 }
 
-@media screen and (max-width: 700px) {
-  .main-content {
-    top: 80px;
-  }
-
-  app-header {
-    height: 80px;
-  }
-}
-
 @media screen and (max-width: 450px) {
   .main-content {
     padding: 16px;

src/app/components/summary/summary.component.scss

@@ -204,14 +204,6 @@
   }
 }
 
-@media screen and (max-width: 910px) {
-  section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-}
-
 @media screen and (max-width: 700px) {
   .header {
     flex-direction: column;
@@ -274,7 +266,7 @@
   }
 }
 
-@media screen and (max-width: 520px) {
+@media screen and (max-width: 560px) {
   .summary-container {
     height: fit-content;
   }
@@ -334,7 +326,7 @@
   }
 }
 
-@media screen and (max-width: 450px) {
+@media screen and (max-width: 470px) {
   .header {
     .title {
       font-size: 47px;
@@ -374,7 +366,7 @@
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 410px) {
   .todo-done,
   .urgent,
   .tasks {
@@ -414,7 +406,7 @@
   }
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 360px) {
   .todo-done,
   .urgent,
   .tasks {
@@ -422,7 +414,7 @@
   }
 
   .details {
-    width: 75px;
+    width: 70px;
 
     p {
       font-size: 10px;

src/app/shared/components/header/header.component.scss

@@ -8,7 +8,7 @@
 
 .headline {
   font-size: 20px;
-  padding-left: 116px;
+  padding-left: 64px;
 }
 
 .navbar {
@@ -56,9 +56,10 @@
 
 /*------------- RESPONSIVE -------------*/
 
-@media screen and (max-width: 910px) {
+@media screen and (max-width: 700px) {
   .header {
     width: 100%;
+    height: 80px;
   }
 
   .headline {
@@ -69,9 +70,3 @@
     display: unset;
   }
 }
-
-@media screen and (max-width: 700px) {
-  .header {
-    height: 80px;
-  }
-}