fix: Truncated text in InplaceTextEditor [FC-0090]

src/generic/inplace-text-editor/InplaceTextEditor.scss

@@ -0,0 +1,6 @@
+.inplace-text-editor-label {
+  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

src/generic/inplace-text-editor/index.tsx

@@ -6,7 +6,6 @@ import {
   Form,
   Icon,
   IconButton,
-  Truncate,
   Stack,
 } from '@openedx/paragon';
 import { Edit } from '@openedx/paragon/icons';
@@ -69,9 +68,9 @@ export const InplaceTextEditor: React.FC<InplaceTextEditorProps> = ({
   // In that case, we show the new text instead of the original in read-only mode as an optimistic update.
   if (readOnly || pendingSaveText) {
     return (
-      <Truncate.Deprecated className={textClassName}>
+      <div className={`inplace-text-editor-label ${textClassName}`}>
         {pendingSaveText || text}
-      </Truncate.Deprecated>
+      </div>
     );
   }
 
@@ -93,9 +92,9 @@ export const InplaceTextEditor: React.FC<InplaceTextEditorProps> = ({
         )
         : (
           <>
-            <Truncate.Deprecated className={textClassName}>
+            <div className={`inplace-text-editor-label ${textClassName}`}>
               {text}
-            </Truncate.Deprecated>
+            </div>
             <IconButton
               src={Edit}
               iconAs={Icon}

src/generic/styles.scss

@@ -14,3 +14,4 @@
 @import "./block-type-utils";
 @import "./modal-iframe";
 @import "./alert-message";
+@import "./inplace-text-editor/InplaceTextEditor";

src/library-authoring/section-subsections/LibrarySubsectionPage.tsx

@@ -28,7 +28,7 @@ interface OverflowLinksProps {
 const OverflowLinks = ({ children, to }: OverflowLinksProps) => {
   if (typeof to === 'string') {
     return (
-      <Link className="link-muted" to={to}>
+      <Link className="subsection-breadcrumb link-muted" to={to}>
         {children}
       </Link>
     );

src/library-authoring/section-subsections/index.scss

@@ -36,3 +36,11 @@
     padding: 0;
   }
 }
+
+.subsection-breadcrumb {
+  max-width: 700px;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}