Merge pull request #2864 from OneCommunityGlobal/Sai_Preetham_Name_Overflow_On_Dashboard

Sai_Preetham_Name_Overflow_On_Dashboard

Author: one-community

src/components/SummaryBar/SummaryBar.css

@@ -166,6 +166,47 @@
   opacity: 0.4;
   filter: alpha(opacity=40); /* msie */
 }
+.name-segment {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.2rem;
+  margin-bottom: 2px;
+}
+
+@media (min-width: 992px) {
+  .name-segment {
+    max-width: 21ch; 
+  }
+
+  .name-segment:first-child {
+    max-width: 14ch;
+  }
+
+  .name-segment:nth-child(2) {
+    display: block;
+    max-width: 14ch; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .name-segment:nth-child(3) {
+    display: block;
+    max-width: 14ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .name-segment::after {
+    content: '';
+    visibility: hidden;
+  }
+
+  .name-segment:hover::after {
+    visibility: hidden;
+  }
+}
 
 /* Custom media query for screen widths between 1200px and 1330px */
 @media (min-width: 1200px) and (max-width: 1330px) {

src/components/SummaryBar/SummaryBar.jsx

@@ -541,8 +541,27 @@ function SummaryBar(props) {
             </font>
             <CardTitle className={`align-middle ${darkMode ? 'text-light' : 'text-dark'}`} tag="h3">
               <div className="font-weight-bold">
-                {userProfile?.firstName || displayUserProfile.firstName}{' '}
-                {userProfile?.lastName || displayUserProfile.lastName}
+                <span
+                  className="name-segment"
+                  title={userProfile?.firstName || displayUserProfile.firstName}
+                >
+                  {(userProfile?.firstName || displayUserProfile.firstName).split(' ')[0]}
+                </span>
+                <span
+                  className="name-segment"
+                  title={userProfile?.firstName || displayUserProfile.firstName}
+                >
+                  {(userProfile?.firstName || displayUserProfile.firstName)
+                    .split(' ')
+                    .slice(1)
+                    .join(' ')}
+                </span>
+                <span
+                  className="name-segment"
+                  title={userProfile?.lastName || displayUserProfile.lastName}
+                >
+                  {userProfile?.lastName || displayUserProfile.lastName}
+                </span>
               </div>
             </CardTitle>
           </div>