feat: enable text-overflow ellipsis in welcome message for username

src/app/components/summary/summary.component.html

@@ -8,7 +8,7 @@
   </div>
   @if (!isLoading) {
   <div class="content">
-    <div class="left-container">
+    <div class="summary-container">
       <!-- Top Frame -->
       <div class="top-frame">
         <div class="todo-done" routerLink="/board">
@@ -97,7 +97,7 @@
     </div>
 
     <!-- Greeting -->
-    <div class="right-container">
+    <div class="welcome-container">
       <p>{{ greeting }},</p>
       @if (currentUser) {
       <span id="welcome-user">
@@ -109,7 +109,7 @@
   </div>
   } @else {
   <div class="content">
-    <div class="left-container">
+    <div class="summary-container">
       <app-loading-spinner></app-loading-spinner>
     </div>
   </div>

src/app/components/summary/summary.component.scss

@@ -3,16 +3,19 @@
   align-items: center;
   position: relative;
   height: 73px;
+
   .title {
     font-size: 61px;
     font-weight: 700;
     padding-right: 24px;
   }
+
   .metrics-txt {
     font-size: 27px;
     font-weight: 400;
     padding-left: 24px;
   }
+
   .blue-bar {
     height: 80%;
     width: 3px;
@@ -23,25 +26,35 @@
 .content {
   display: flex;
   margin-top: 48px;
+  width: 100%;
 }
 
-.right-container {
+.welcome-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  flex: 1;
   margin-left: 48px;
+  min-width: 0;
+
   p {
     font-size: 47px;
     font-weight: 500;
   }
+
   span {
     font-size: 64px;
     font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+    display: block;
     color: var(--light-blue);
   }
 }
 
-.left-container {
+.summary-container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -66,16 +79,20 @@
   border-radius: 30px;
   background-color: var(--white);
   cursor: pointer;
+
   &:hover {
     transform: scale(1.02);
     transition: 500ms ease-out;
     background-color: var(--dark-blue);
+
     p,
     span {
       color: var(--white);
     }
+
     .circle {
       background-color: var(--white);
+
       img {
         filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(30deg)
           brightness(104%) contrast(101%);
@@ -86,20 +103,24 @@
 
 .urgent {
   width: 560px;
+
   .right {
     width: 58%;
   }
+
   .left {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 52%;
   }
+
   .line {
     height: 100px;
     width: 2px;
     background-color: var(--gray);
   }
+
   img {
     height: 69px;
     width: 69px;
@@ -115,12 +136,14 @@
   flex-direction: column;
   align-items: center;
   width: 130px;
+
   p {
     padding: 0 24px;
     font-size: 20px;
     font-weight: 400;
     text-align: center;
   }
+
   span {
     font-size: 64px;
     font-weight: 700;
@@ -135,6 +158,7 @@
   width: 69px;
   border-radius: 100%;
   background-color: var(--dark-blue);
+
   img {
     height: 32px;
     width: 32px;
@@ -144,14 +168,17 @@
 .date {
   display: flex;
   justify-content: center;
+
   p {
     font-size: 18px;
     font-weight: 400;
   }
+
   span {
     font-size: 24px;
     font-weight: 700;
   }
+
   .spacer {
     padding-top: 12px;
   }
@@ -159,8 +186,8 @@
 
 /*------------- RESPONSIVE -------------*/
 
-@media screen and (max-width: 1500px) {
-  .right-container {
+@media screen and (max-width: 1150px) {
+  .welcome-container {
     display: none;
   }
 }
@@ -170,6 +197,7 @@
     .title {
       font-size: 50px;
     }
+
     .metrics-txt {
       font-size: 24px;
     }
@@ -191,9 +219,11 @@
     padding: 0;
     width: 100%;
     height: 100%;
+
     .metrics-txt {
       padding: 0;
     }
+
     .blue-bar {
       position: absolute;
       bottom: -15px;
@@ -204,7 +234,7 @@
 }
 
 @media screen and (max-width: 650px) {
-  .left-container {
+  .summary-container {
     width: auto;
   }
 
@@ -225,6 +255,7 @@
     margin: 20px 0;
     padding: 6px;
     width: auto;
+
     img {
       margin-left: 10%;
     }
@@ -244,17 +275,19 @@
 }
 
 @media screen and (max-width: 520px) {
-  .left-container {
+  .summary-container {
     height: fit-content;
   }
 
   .todo-done,
   .tasks {
     height: 120px;
+
     .circle {
       width: 40px;
       height: 40px;
     }
+
     img {
       width: 20px;
       height: 20px;
@@ -263,6 +296,7 @@
 
   .urgent {
     height: 120px;
+
     img {
       width: 40px;
       height: 40px;
@@ -271,9 +305,11 @@
 
   .details {
     width: 100px;
+
     p {
       font-size: 16px;
     }
+
     span {
       font-size: 38px;
     }
@@ -291,6 +327,7 @@
     p {
       font-size: 16px;
     }
+
     span {
       font-size: 21px;
     }
@@ -302,6 +339,7 @@
     .title {
       font-size: 47px;
     }
+
     .metrics-txt {
       font-size: 20px;
     }
@@ -313,6 +351,7 @@
     height: 100px;
     border-radius: 30px;
     padding: 6px;
+
     .line {
       height: 80px;
     }
@@ -322,6 +361,7 @@
     p {
       font-size: 14px;
     }
+
     span {
       font-size: 18px;
     }
@@ -347,6 +387,7 @@
       padding: 0 12px;
       font-size: 13px;
     }
+
     span {
       font-size: 32px;
     }
@@ -356,6 +397,7 @@
     p {
       font-size: 12px;
     }
+
     span {
       font-size: 16px;
     }
@@ -363,6 +405,7 @@
 
   .tasks {
     height: 120px;
+
     .details {
       p {
         padding: 8px 0;
@@ -380,6 +423,7 @@
 
   .details {
     width: 75px;
+
     p {
       font-size: 10px;
     }
@@ -389,6 +433,7 @@
     p {
       font-size: 11px;
     }
+
     span {
       font-size: 14px;
     }