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.

Author: xitij2000

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 {

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>
   );

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>
 );