From d0b52e3e770108f34ab3e7e76c8c3aa68abee2d7 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Thu, 10 Oct 2024 15:37:28 -0700
Subject: [PATCH] No monospace in diff

---
 packages/html-reporter/src/testErrorView.css |  7 +++++--
 packages/html-reporter/src/testErrorView.tsx | 10 +++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/html-reporter/src/testErrorView.css b/packages/html-reporter/src/testErrorView.css
index afb543a0c2..d5a4534e7e 100644
--- a/packages/html-reporter/src/testErrorView.css
+++ b/packages/html-reporter/src/testErrorView.css
@@ -14,9 +14,8 @@
   limitations under the License.
 */
 
-.test-error-message {
+.test-error-view {
   white-space: pre;
-  font-family: monospace;
   overflow: auto;
   flex: none;
   padding: 0;
@@ -26,3 +25,7 @@
   line-height: initial;
   margin-bottom: 6px;
 }
+
+.test-error-text {
+  font-family: monospace;
+}
diff --git a/packages/html-reporter/src/testErrorView.tsx b/packages/html-reporter/src/testErrorView.tsx
index 46e3f880c7..520da1fc19 100644
--- a/packages/html-reporter/src/testErrorView.tsx
+++ b/packages/html-reporter/src/testErrorView.tsx
@@ -24,7 +24,7 @@ export const TestErrorView: React.FC<{
   error: string;
 }> = ({ error }) => {
   const html = React.useMemo(() => ansiErrorToHtml(error), [error]);
-  return <div className='test-error-message' dangerouslySetInnerHTML={{ __html: html || '' }}></div>;
+  return <div className='test-error-view test-error-text' dangerouslySetInnerHTML={{ __html: html || '' }}></div>;
 };
 
 export const TestScreenshotErrorView: React.FC<{
@@ -34,10 +34,10 @@ export const TestScreenshotErrorView: React.FC<{
 }> = ({ errorPrefix, diff, errorSuffix }) => {
   const prefixHtml = React.useMemo(() => ansiErrorToHtml(errorPrefix), [errorPrefix]);
   const suffixHtml = React.useMemo(() => ansiErrorToHtml(errorSuffix), [errorSuffix]);
-  return <div data-testid='test-screenshot-error-view' className='test-error-message'>
-    <div dangerouslySetInnerHTML={{ __html: prefixHtml || '' }}></div>
-    <ImageDiffView key='image-diff' diff={diff} hideDetails={true} ></ImageDiffView>
-    <div data-testid='error-suffix' dangerouslySetInnerHTML={{ __html: suffixHtml || '' }}></div>
+  return <div data-testid='test-screenshot-error-view' className='test-error-view'>
+    <div dangerouslySetInnerHTML={{ __html: prefixHtml || '' }} className='test-error-text' style={{ marginBottom: 20 }}></div>
+    <ImageDiffView key='image-diff' diff={diff} hideDetails={true}></ImageDiffView>
+    <div data-testid='error-suffix' dangerouslySetInnerHTML={{ __html: suffixHtml || '' }} className='test-error-text'></div>
   </div>;
 };