responsive design

src/app/components/contacts/contact-edit/contact-edit.component.scss

@@ -14,13 +14,14 @@ section {
 .dialog {
   background-color: var(--white);
   width: 760px;
-  height: 550px;
+  height: auto;
   border-radius: 26px;
   border: 2px solid rgba($color: #000000, $alpha: 0.1);
 }
 
 .header {
   display: flex;
+  align-items: center;
   background-color: var(--bgSidebar);
   height: 72px;
   padding: 24px;
@@ -75,3 +76,85 @@ section {
   align-items: center;
   width: 70%;
 }
+
+@media screen and (max-width: 800px) {
+  .dialog {
+    width: 560px;
+    position: relative;
+  }
+
+  .badge {
+    position: absolute;
+    top: 125px;
+    right: 40px;
+  }
+
+  .content {
+    flex-direction: column-reverse;
+  }
+
+  .header {
+    height: 42px;
+    img {
+      width: 34px;
+      height: 46px;
+    }
+    p {
+      font-size: 50px;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .dialog {
+    width: 360px;
+  }
+
+  .badge {
+    top: 65px;
+    right: 120px;
+  }
+
+  .content {
+    flex-direction: column-reverse;
+    margin-top: 20px;
+    .circle {
+      width: 80px;
+      height: 80px;
+      .initials {
+        font-size: 32px;
+        font-weight: 500;
+        color: var(--white);
+        text-shadow: 1px 1px 2px var(--black);
+      }
+    }
+  }
+
+  .header {
+    height: 60px;
+    align-items: normal;
+    p {
+      font-size: 28px;
+    }
+    img {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .dialog {
+    width: 280px;
+  }
+
+  .badge {
+    top: 65px;
+    right: 95px;
+  }
+
+  .header {
+    p {
+      font-size: 22px;
+    }
+  }
+}

src/app/components/contacts/contact-form/contact-form.component.scss

@@ -37,6 +37,29 @@ span {
       box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
     }
   }
+  .btn-save {
+    padding: 12px;
+    margin: 12px 12px;
+    border-radius: 10px;
+    border: 1px solid var(--black) !important;
+    background-color: var(--light-gray);
+    font-size: 23px;
+    font-weight: 400;
+    transition: 125ms ease-in-out;
+    &:hover:not(:disabled) {
+      box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+      background-color: var(--light-blue) !important;
+      border: 1px solid var(--light-blue) !important;
+      cursor: pointer;
+    }
+    &:not(:disabled) {
+      background-color: var(--very-dark-blue) !important;
+      color: var(--white);
+    }
+    &:hover {
+      cursor: default;
+    }
+  }
   input {
     background-color: var(--white);
     border: 1px solid var(--gray);
@@ -69,29 +92,46 @@ span {
   width: 111px;
   height: 57px;
   margin: 0 24px;
-  font-size: 21px;
+  padding-bottom: 12px;
-  font-weight: 400;
 }
 
+@media screen and (max-width: 800px) {
+  .name {
+    flex-direction: column;
+    width: 60%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .name {
+    width: 100%;
+  }
+
+  .contact-formular {
+    min-width: 0;
+    input {
+      width: 85%;
+      font-size: 18px;
+    }
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .contact-formular {
+    width: 270px;
+    input {
+      width: 80%;
+      font-size: 16px;
+    }
+    .btn-delete {
+      font-size: 18px;
+    }
     .btn-save {
-  padding: 15px 30px;
+      font-size: 18px;
-  margin-top: 12px;
+    }
-  border-radius: 10px;
+  }
-  border-color: var(--black);
+
-  background-color: var(--light-gray);
+  .btn {
-  font-size: 23px;
+    margin: 0 6px;
-  font-weight: 400;
-  transition: 125ms ease-in-out;
-  &:hover:not(:disabled) {
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-    background-color: var(--light-blue) !important;
-    cursor: pointer;
-  }
-  &:not(:disabled) {
-    background-color: var(--very-dark-blue) !important;
-    color: var(--white);
-  }
-  &:hover {
-    cursor: default;
   }
 }