added responsive btn

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

@@ -8,6 +8,9 @@
         <span>Add new contact</span>
         <img src="./../../../assets/img/contact/add.svg" alt="check" />
       </div>
+      <div class="btn-inside-mobile">
+        <img src="./../../../assets/img/contact/add.svg" alt="check" />
+      </div>
     </button>
     <div class="content">
       @for (sortLetter of this.sortFirstLetter(); track sortLetter) {

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

@@ -36,6 +36,10 @@ section {
   }
 }
 
+.btn-inside-mobile {
+  display: none;
+}
+
 .left-frame {
   position: absolute;
   top: -64px;
@@ -147,6 +151,13 @@ section {
     top: -64px;
     left: -64px;
     width: calc(100vw - 232px);
+    background-color: var(--bgContent);
+  }
+
+  .contact {
+    &:hover {
+      background-color: var(--light-gray);
+    }
   }
 }
 
@@ -158,6 +169,31 @@ section {
     width: calc(100vw);
     min-height: calc(100vh - 208px);
   }
+
+  .btn-inside {
+    display: none;
+  }
+
+  .btn-inside-mobile {
+    display: block;
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 100px;
+    right: 40px;
+    justify-content: space-between;
+    height: 56px;
+    width: 56px;
+    border-radius: 100%;
+    z-index: 1;
+    cursor: pointer;
+    img {
+      padding: 0;
+      width: 32px;
+      height: 32px;
+    }
+  }
 }
 
 @media screen and (max-width: 450px) {
@@ -167,10 +203,6 @@ section {
     min-height: calc(100vh - 176px);
   }
 
-  .btn {
-    display: none;
-  }
-
   .first-letter {
     &:first-child {
       margin-top: 0;