bugfixes

src/app/app.component.scss

@@ -33,6 +33,7 @@ app-sidebar-mobile {
   padding: 64px;
   background-color: var(--bgContent);
   overflow-y: auto;
+  z-index: 1;
 }
 
 .blur-background {

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

@@ -18,13 +18,16 @@ section {
   align-items: center;
   background-color: var(--white);
   width: 600px;
-  height: 170px;
+  height: 200px;
   border-radius: 26px;
+  margin: 24px;
   border: 2px solid rgba($color: #000000, $alpha: 0.1);
   p {
+    text-align: center;
     font-size: 27px;
     font-weight: 500;
     margin-bottom: 12px;
+    padding: 0 12px;
   }
 }
 
@@ -41,8 +44,6 @@ section {
   width: 111px;
   height: 57px;
   margin: 0 24px;
-  font-size: 21px;
-  font-weight: 400;
 }
 
 .btn-cancle {
@@ -80,3 +81,29 @@ section {
     box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
   }
 }
+
+@media screen and (max-width: 450px) {
+  .dialog {
+    p {
+      font-size: 22px;
+    }
+  }
+}
+
+@media screen and (max-width: 350px) {
+  .dialog {
+    width: 280px;
+    p {
+      font-size: 22px;
+    }
+  }
+
+  .btn {
+    width: 100px;
+  }
+
+  .btn-delete-contact,
+  .btn-cancle {
+    font-size: 18px;
+  }
+}

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

@@ -127,7 +127,7 @@
 }
 
 .btn-mobile {
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
   position: fixed;
@@ -210,6 +210,10 @@
     display: none;
   }
 
+  .btn-mobile {
+    display: flex;
+  }
+
   .name {
     font-size: 36px;
     font-weight: 600;