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 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}

src/generic/styles.scss

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