From 53e925e07a23ed25de6ff7a68c5160bf7d42f8c1 Mon Sep 17 00:00:00 2001
From: Kshitij Sobti <kshitij@sobti.in>
Date: Fri, 15 Aug 2025 07:42:07 +0530
Subject: [PATCH] fix: Replace `Truncate.Deprecated` with CSS-based truncation
 (#2374)

The Truncate element as it exists has a bug where it can end up in an infinite loop when truncating to a very small size on mobiles. This makes the course outline view unresponsive on mobile and can lead to a crash.

This replaces the Truncate element with some CSS.
---
 src/course-outline/card-header/CardHeader.scss | 12 +++++++++++-
 src/course-outline/card-header/TitleButton.tsx |  5 +++--
 src/course-outline/card-header/TitleLink.tsx   |  6 ++++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/course-outline/card-header/CardHeader.scss b/src/course-outline/card-header/CardHeader.scss
index 26a32bbe9..0d01c8fb4 100644
--- a/src/course-outline/card-header/CardHeader.scss
+++ b/src/course-outline/card-header/CardHeader.scss
@@ -5,11 +5,21 @@
   .item-card-header__title-btn {
     justify-content: flex-start;
     padding: 0;
-    flex: 1 1 0%;
+    flex: 1 1 0;
     height: 1.5rem;
     margin-right: .25rem;
     background: transparent;
     color: var(--pgn-color-black);
+
+      .truncate-1-line {
+        -webkit-line-clamp: 1;  /* stylelint-disable-line value-no-vendor-prefix */
+        line-clamp: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;  /* stylelint-disable-line value-no-vendor-prefix */
+        min-width: 100px;
+        -webkit-box-orient: vertical;  /* stylelint-disable-line value-no-vendor-prefix */
+      }
   }
 
   .item-card-button-icon {
diff --git a/src/course-outline/card-header/TitleButton.tsx b/src/course-outline/card-header/TitleButton.tsx
index 84e538f36..2da1019e6 100644
--- a/src/course-outline/card-header/TitleButton.tsx
+++ b/src/course-outline/card-header/TitleButton.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   OverlayTrigger,
   Tooltip,
-  Truncate,
 } from '@openedx/paragon';
 import {
   ArrowDropDown as ArrowDownIcon,
@@ -48,7 +47,9 @@ const TitleButton = ({
         onClick={onTitleClick}
       >
         {prefixIcon}
-        <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
+        <span className="truncate-1-line">
+          {title}
+        </span>
       </Button>
     </OverlayTrigger>
   );
diff --git a/src/course-outline/card-header/TitleLink.tsx b/src/course-outline/card-header/TitleLink.tsx
index b4030c2d5..1cc57ab04 100644
--- a/src/course-outline/card-header/TitleLink.tsx
+++ b/src/course-outline/card-header/TitleLink.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { Button, Truncate } from '@openedx/paragon';
+import { Button } from '@openedx/paragon';
 
 interface TitleLinkProps {
   title: string;
@@ -22,7 +22,9 @@ const TitleLink = ({
     to={titleLink}
   >
     {prefixIcon}
-    <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
+    <span className="truncate-1-line">
+      {title}
+    </span>
   </Button>
 );