remove scrollbar & added text-overflow

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") }}

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,
+  max-width: 100%; /* Adjust this width as necessary */
-  .last-name,
+  overflow: hidden;
-  span {
+  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) {