From d286ca36c2d3059ed297b96994701aa5c111d618 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 18 Aug 2022 18:22:32 +0530
Subject: [PATCH] fix: text editor overflow issue

(cherry picked from commit c5f64d43bbb7d00a48bea977df987cb445db6320)
---
 frappe/public/js/frappe/form/formatters.js        |  5 ++++-
 frappe/public/js/frappe/web_form/web_form_list.js |  4 ++++
 frappe/public/scss/website/web_form.scss          | 10 +++++-----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/frappe/form/formatters.js b/frappe/public/js/frappe/form/formatters.js
index e0286a4af1..7c580ff2b3 100644
--- a/frappe/public/js/frappe/form/formatters.js
+++ b/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) {
diff --git a/frappe/public/js/frappe/web_form/web_form_list.js b/frappe/public/js/frappe/web_form/web_form_list.js
index 5f2a65bbec..6d89b8ac95 100644
--- a/frappe/public/js/frappe/web_form/web_form_list.js
+++ b/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);
 		});
 
diff --git a/frappe/public/scss/website/web_form.scss b/frappe/public/scss/website/web_form.scss
index 2fc05934ff..19cb7207a1 100644
--- a/frappe/public/scss/website/web_form.scss
+++ b/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;
 										}
 									}
 								}