From e59a464aaf46ef9f752e39e67ca088abcc78f72b Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Fri, 13 Jun 2025 21:12:39 -0500
Subject: [PATCH 1/2] fix: Truncated text in InplaceTextEditor

---
 src/generic/inplace-text-editor/InplaceTextEditor.scss | 6 ++++++
 src/generic/inplace-text-editor/index.tsx              | 9 ++++-----
 src/generic/styles.scss                                | 1 +
 3 files changed, 11 insertions(+), 5 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 0000000000..c1041c889c
--- /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 cb07d2ffa9..d390ca71dd 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 className={textClassName}>
+      <div className={`inplace-text-editor-label ${textClassName}`}>
         {pendingSaveText || text}
-      </Truncate>
+      </div>
     );
   }
 
@@ -93,9 +92,9 @@ export const InplaceTextEditor: React.FC<InplaceTextEditorProps> = ({
         )
         : (
           <>
-            <Truncate className={textClassName}>
+            <div className={`inplace-text-editor-label ${textClassName}`}>
               {text}
-            </Truncate>
+            </div>
             <IconButton
               src={Edit}
               iconAs={Icon}
diff --git a/src/generic/styles.scss b/src/generic/styles.scss
index 22756b9ad1..41475055ce 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";

From f445f100a6e7b883fa4482d6bc20b393e36af999 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Mon, 16 Jun 2025 19:06:01 -0500
Subject: [PATCH 2/2] fix: Truncated breadcrumb in subsection page

---
 .../section-subsections/LibrarySubsectionPage.tsx         | 2 +-
 src/library-authoring/section-subsections/index.scss      | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/library-authoring/section-subsections/LibrarySubsectionPage.tsx b/src/library-authoring/section-subsections/LibrarySubsectionPage.tsx
index 1b60d5d3a3..0881f92b07 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 9ccd176d51..4785aa72f3 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;
+}