design toolbar & responsive task overview

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

@@ -42,12 +42,16 @@
 .headline {
   font-size: 61px;
   font-weight: 700;
+  width: 100%;
+  word-wrap: break-word;
 }
 
 .description {
   font-size: 20px;
   font-weight: 400;
   margin-top: 32px;
+  width: 100%;
+  word-wrap: break-word;
 }
 
 // DATE
@@ -239,3 +243,28 @@
     }
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 650px) {
+  .headline {
+    font-size: 36px;
+  }
+
+  .description,
+  .date,
+  .priority,
+  .assigned,
+  .subtasks {
+    font-size: 16px;
+  }
+
+  .subtasks,
+  .assigned,
+  .date,
+  .priority {
+    p {
+      font-size: 16px;
+    }
+  }
+}

src/styles.scss

@@ -37,18 +37,22 @@ body {
 
 /*------------- SCROLLBAR -------------*/
 
-*::-webkit-scrollbar {
-  width: 16px;
-}
-
-*::-webkit-scrollbar-track {
-  background: var(--white);
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: var(--light-gray);
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
   border-radius: 10px;
-  border: 3px solid var(--white);
+  background-color: var(--white);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background-color: var(--white);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  background-color: var(--light-gray);
 }
 
 /*------------- FONTS -------------*/