style: truncate class/course title with an ellipsis at the end

Pearson-Advance · Oct 23, 2024 · 3b2ff1d · 3b2ff1d
1 parent 87d41e6
commit 3b2ff1d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git 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
@@ -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" />