From 97710c262e76c3280dc70c059b0711a9ec544d43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chris=20Ch=C3=A1vez?= <xnpiochv@gmail.com>
Date: Wed, 18 Jun 2025 16:38:17 -0500
Subject: [PATCH] fix: Truncated text in InplaceTextEditor [FC-0090] (#2146)

* Fix the truncated text in InplaceTextEditor.
* Fix the truncated text in the breadcrumbs in the subsection page
---
 src/generic/inplace-text-editor/InplaceTextEditor.scss   | 6 ++++++
 src/generic/inplace-text-editor/index.tsx                | 9 ++++-----
 src/generic/styles.scss                                  | 1 +
 .../section-subsections/LibrarySubsectionPage.tsx        | 2 +-
 src/library-authoring/section-subsections/index.scss     | 8 ++++++++
 5 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 src/generic/inplace-text-editor/InplaceTextEditor.scss

diff --git a/src/generic/inplace-text-editor/InplaceTextEditor.scss b/src/generic/inplace-text-editor/InplaceTextEditor.scss
new file mode 100644
index 000000000..c1041c889
--- /dev/null
+++ b/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;
+}
diff --git a/src/generic/inplace-text-editor/index.tsx b/src/generic/inplace-text-editor/index.tsx
index 07624d705..d390ca71d 100644
--- a/src/generic/inplace-text-editor/index.tsx
+++ b/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}
diff --git a/src/generic/styles.scss b/src/generic/styles.scss
index 22756b9ad..41475055c 100644
--- a/src/generic/styles.scss
+++ b/src/generic/styles.scss
@@ -14,3 +14,4 @@
 @import "./block-type-utils";
 @import "./modal-iframe";
 @import "./alert-message";
+@import "./inplace-text-editor/InplaceTextEditor";
diff --git a/src/library-authoring/section-subsections/LibrarySubsectionPage.tsx b/src/library-authoring/section-subsections/LibrarySubsectionPage.tsx
index 1b60d5d3a..0881f92b0 100644
--- a/src/library-authoring/section-subsections/LibrarySubsectionPage.tsx
+++ b/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>
     );
diff --git a/src/library-authoring/section-subsections/index.scss b/src/library-authoring/section-subsections/index.scss
index 21781f989..a9ecab897 100644
--- a/src/library-authoring/section-subsections/index.scss
+++ b/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;
+}