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