From cac5a73353ab64f5d8b41a4fc5704a8a19bbc8fe Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Wed, 27 Mar 2024 09:27:03 +0100
Subject: [PATCH] update design

---
 .../components/contacts/contacts.component.scss | 17 ++++++++++++++---
 .../components/contacts/contacts.component.ts   |  2 ++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss
index 1b98aff..dbae9e3 100644
--- a/src/app/components/contacts/contacts.component.scss
+++ b/src/app/components/contacts/contacts.component.scss
@@ -37,7 +37,7 @@ section {
   top: -64px;
   left: -64px;
   width: 400px;
-  height: calc(100vh - 128px);
+  min-height: calc(100vh - 128px);
   background-color: var(--white);
   padding-top: 32px;
   box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
@@ -46,14 +46,14 @@ section {
 .content {
   display: flex;
   flex-direction: column;
-  padding: 48px 24px 24px 24px;
+  padding: 24px;
 }
 
 .first-letter {
   font-size: 20px;
   font-weight: 400;
   padding-left: 38px;
-  margin-bottom: 12px;
+  margin: 32px 0 12px 0;
 }
 
 .line {
@@ -101,3 +101,14 @@ section {
     color: var(--light-blue);
   }
 }
+
+@media screen and (max-width: 910px) {
+  .left-frame {
+    position: fixed;
+    top: 96px;
+    left: 0px;
+    width: 100vw;
+    min-height: calc(100vh - 207px);
+    background-color: var(--bgContent);
+  }
+}
diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts
index 930fca8..7026a8a 100644
--- a/src/app/components/contacts/contacts.component.ts
+++ b/src/app/components/contacts/contacts.component.ts
@@ -38,12 +38,14 @@ export class ContactsComponent {
   }
 
   sortUsersFirstLetter() {
+    this.usersFirstLetter = [];
     this.usersFirstLetter = Array.from(
       new Set(this.allUsers.map((user) => user.firstName[0].toUpperCase()))
     );
   }
 
   sortUsersByFirstLetter() {
+    this.usersByFirstLetter = {};
     this.allUsers.forEach((user) => {
       const firstLetter = user.firstName[0].toUpperCase();
       if (!this.usersByFirstLetter[firstLetter]) {