From 3b2ff1d208b91ae6a0382a899149a6b753e8bc8d Mon Sep 17 00:00:00 2001
From: Sergio Valero <sergio.valero@edunext.co>
Date: Tue, 22 Oct 2024 18:31:12 -0400
Subject: [PATCH] style: truncate class/course title with an ellipsis at the
 end

---
 .../Dashboard/DashboardPage/index.scss        |  7 +++++
 .../InstructorAssignSection/ClassCard.jsx     | 27 +++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/features/Dashboard/DashboardPage/index.scss b/src/features/Dashboard/DashboardPage/index.scss
index 3df3a8b..8e7b51f 100644
--- a/src/features/Dashboard/DashboardPage/index.scss
+++ b/src/features/Dashboard/DashboardPage/index.scss
@@ -23,6 +23,13 @@
   min-height: 426px;
 }
 
+.truncated-text {
+  width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .schedule-section {
   margin-bottom: 2rem;
 }
diff --git a/src/features/Dashboard/InstructorAssignSection/ClassCard.jsx b/src/features/Dashboard/InstructorAssignSection/ClassCard.jsx
index 90d114b..a46ce25 100644
--- a/src/features/Dashboard/InstructorAssignSection/ClassCard.jsx
+++ b/src/features/Dashboard/InstructorAssignSection/ClassCard.jsx
@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import { Button } from 'react-paragon-topaz';
+import { Tooltip, OverlayTrigger } from '@edx/paragon';
 
 import { formatDateRange } from 'helpers';
 import { useInstitutionIdQueryParam } from 'hooks';
@@ -19,8 +20,30 @@ const ClassCard = ({ data }) => {
 
   return (
     <div className="class-card-container">
-      <h4>{data?.className}</h4>
-      <p className="course-name">{data?.masterCourseName}</p>
+      <OverlayTrigger
+        placement="top"
+        overlay={
+          (
+            <Tooltip>
+              {data?.className}
+            </Tooltip>
+          )
+        }
+      >
+        <h4 className="truncated-text">{data?.className}</h4>
+      </OverlayTrigger>
+      <OverlayTrigger
+        placement="bottom"
+        overlay={
+          (
+            <Tooltip>
+              {data?.masterCourseName}
+            </Tooltip>
+          )
+        }
+      >
+        <p className="course-name truncated-text">{data?.masterCourseName}</p>
+      </OverlayTrigger>
       <p className="date"><i className="fa-sharp fa-regular fa-calendar-day" />{formatDateRange(data.startDate, data?.endDate)}</p>
       <Button variant="outline-primary" size="sm" onClick={handleManageButton}>
         <i className="fa-regular fa-chalkboard-user" />