fix: address comments

src/features/Dashboard/DashboardPage/index.scss

@@ -23,11 +23,8 @@
   min-height: 426px;
 }
 
-.truncated-text {
-  width: 250px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.responsive {
+  display: none;
 }
 
 .schedule-section {
@@ -60,4 +57,12 @@
   .instructor-assign-section {
     min-height: 200px;
   }
+
+  .no-responsive {
+    display: none;
+  }
+
+  .responsive {
+    display: block;
+  }
 }

src/features/Dashboard/InstructorAssignSection/ClassCard.jsx

@@ -3,11 +3,12 @@ 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';
 
+import ToolTip from 'features/Dashboard/InstructorAssignSection/ToolTip';
+
 import 'features/Dashboard/InstructorAssignSection/index.scss';
 
 const ClassCard = ({ data }) => {
@@ -18,32 +19,28 @@ const ClassCard = ({ data }) => {
     history.push(addQueryParam(`/manage-instructors/${encodeURIComponent(data?.masterCourseId)}/${encodeURIComponent(data?.classId)}?previous=dashboard`));
   };
 
+  const classElement = 'className';
+  const courseElement = 'courseName';
+
   return (
     <div className="class-card-container">
-      <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>
+      <div className="no-responsive">
+        {data?.className.length > 20 ? (
+          <ToolTip title={data?.className} type={classElement} />
+        ) : (
+          <h4>{data?.className}</h4>
+        )}
+        {data?.masterCourseName.length > 20 ? (
+          <ToolTip title={data?.masterCourseName} type={courseElement} />
+        ) : (
+          <p className="course-name">{data?.masterCourseName}</p>
+        )}
+      </div>
+      <div className="responsive">
+        <h4>{data?.className}</h4>
+        <p className="course-name">{data?.masterCourseName}</p>
+      </div>
+
       <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" />

src/features/Dashboard/InstructorAssignSection/ToolTip.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import { Tooltip, OverlayTrigger } from '@edx/paragon';
+
+const ToolTip = ({ title, type }) => (
+  <OverlayTrigger
+    placement={type === 'className' ? 'top' : 'bottom'}
+    overlay={
+    (
+      <Tooltip>
+        {title}
+      </Tooltip>
+    )
+    }
+    trigger={['hover', 'focus']}
+    show={undefined}
+  >
+    {type === 'className' ? (
+      <h4>{title.substring(0, 20)}...</h4>
+    ) : (
+      <p className="course-name">{title.substring(0, 20)}...</p>
+    )}
+  </OverlayTrigger>
+);
+
+ToolTip.propTypes = {
+  title: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+};
+
+export default ToolTip;

src/features/Dashboard/InstructorAssignSection/_test_/index.test.jsx

@@ -33,12 +33,12 @@ describe('Instructor Assign component', () => {
   );
 
   test('renders components', () => {
-    const { getByText } = component;
+    const { getByText, getAllByText } = component;
 
     expect(getByText('Instructor assignment')).toBeInTheDocument();
-    expect(getByText('ccx 1')).toBeInTheDocument();
-    expect(getByText('Demo Course 1')).toBeInTheDocument();
-    expect(getByText('Jan 23, 2024')).toBeInTheDocument();
+    expect(getAllByText('ccx 1')[0]).toBeInTheDocument();
+    expect(getAllByText('Demo Course 1')[0]).toBeInTheDocument();
+    expect(getAllByText('Jan 23, 2024')[0]).toBeInTheDocument();
     expect(getByText('Manage instructor')).toBeInTheDocument();
   });
 });