fix: text editor overflow issue

(cherry picked from commit c5f64d43bb)

frappe/public/js/frappe/form/formatters.js

@@ -294,7 +294,10 @@ frappe.form.formatters = {
 		let formatted_value = frappe.form.formatters.Text(value);
 		// to use ql-editor styles
 		try {
-			if (!$(formatted_value).find(".ql-editor").length) {
+			if (
+				!$(formatted_value).find(".ql-editor").length &&
+				!$(formatted_value).hasClass("ql-editor")
+			) {
 				formatted_value = `<div class="ql-editor read-mode">${formatted_value}</div>`;
 			}
 		} catch (e) {

frappe/public/js/frappe/web_form/web_form_list.js

@@ -382,6 +382,10 @@ frappe.ui.WebFormListRow = class WebFormListRow {
 					)) ||
 				"";
 			let cell = $(`<td><p class="ellipsis">${value}</p></td>`);
+			if (field.fieldtype === "Text Editor") {
+				value = $(value).addClass("ellipsis");
+				cell = $("<td></td>").append(value);
+			}
 			cell.appendTo(this.row);
 		});
 

frappe/public/scss/website/web_form.scss

@@ -416,16 +416,16 @@
 								td {
 									font-size: 13px;
 									border-top: 1px solid var(--border-color);
+									max-width: 160px;
 
 									.ql-editor, p {
 										width: max-content;
-										max-width: 200px;
+										max-width: 150px;
 										margin-bottom: 0;
 
-										p {
-											overflow: hidden;
-											white-space: nowrap;
-											text-overflow: ellipsis;
+										&.read-mode {
+											display: inline-flex;
+											gap: 5px;
 										}
 									}
 								}