From e81aca3ff86b44969e28d4133634799a1cc549f7 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 31 Mar 2024 10:05:23 +0200
Subject: [PATCH] remove scrollbar & added text-overflow

---
 .../contacts/contacts.component.html          | 16 ++++++---
 .../contacts/contacts.component.scss          | 35 ++++++++++++++-----
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html
index 1270cb4..51954d0 100644
--- a/src/app/components/contacts/contacts.component.html
+++ b/src/app/components/contacts/contacts.component.html
@@ -15,7 +15,13 @@
       <div class="line"></div>
       @for (user of this.sortUsersByFirstLetter(sortLetter); track user; let
       index = $index) {
-      <div class="contact" routerLink="/contacts/{{ user.id }}">
+      <div
+        class="contact"
+        routerLink="/contacts/{{ user.id }}"
+        [ngClass]="{
+          'contact-active': currentUserId === user.id
+        }"
+      >
         <div
           class="circle"
           [ngStyle]="{
@@ -28,13 +34,13 @@
         </div>
         <div class="details">
           <div class="name">
-            <div class="first-name">
+            <p>
               {{ userService.getUserDetails(user.id, "firstName") }}
-            </div>
+            </p>
             <span>,&nbsp;</span>
-            <div class="last-name">
+            <p class="last-name">
               {{ userService.getUserDetails(user.id, "lastName") }}
-            </div>
+            </p>
           </div>
           <div class="email">
             {{ userService.getUserDetails(user.id, "email") }}
diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss
index e5a3d2a..c368481 100644
--- a/src/app/components/contacts/contacts.component.scss
+++ b/src/app/components/contacts/contacts.component.scss
@@ -80,6 +80,15 @@ section {
   }
 }
 
+.contact-active {
+  color: var(--white);
+  background-color: var(--dark-blue);
+  cursor: unset;
+  &:hover {
+    background-color: var(--dark-blue);
+  }
+}
+
 .circle {
   display: flex;
   justify-content: center;
@@ -99,20 +108,26 @@ section {
 
 .details {
   margin-left: 24px;
-  overflow-x: auto;
   width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
 }
 
 .name {
   display: flex;
   align-items: center;
-  .first-name,
-  .last-name,
-  span {
-    font-size: 20px;
-    font-weight: 400;
-    margin-bottom: 6px;
-  }
+  max-width: 100%; /* Adjust this width as necessary */
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 20px;
+  font-weight: 400;
+  margin-bottom: 6px;
+}
+
+.last-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .email {
@@ -120,8 +135,10 @@ section {
   font-weight: 400;
   text-decoration: none;
   color: var(--light-blue);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
 /*------------- RESPONSIVE -------------*/
 
 @media screen and (max-width: 1150px) {