From f562d19f3c2d5666f514cc212bd64f4119d050dc Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Fri, 2 Dec 2022 15:11:30 +0100
Subject: [PATCH] Updated error display styles for error debug

refs. https://github.com/TryGhost/Team/issues/2327

- Some minor CSS style changes were needed for errors on the email debug screen. Also we weren't showing any message i - for whatever reason - there was no data for batches.
---
 ghost/admin/app/components/posts/debug.hbs  | 27 +++++++++++++--------
 ghost/admin/app/styles/layouts/settings.css | 13 +++++++---
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/ghost/admin/app/components/posts/debug.hbs b/ghost/admin/app/components/posts/debug.hbs
index 9eabdffab3..841fa744d9 100644
--- a/ghost/admin/app/components/posts/debug.hbs
+++ b/ghost/admin/app/components/posts/debug.hbs
@@ -330,19 +330,19 @@
                                 {{#if (or batch.providerId batch.errorStatusCode batch.errorMessage)}}
                                     <div class="detailtext">
                                         {{#if batch.providerId}}
-                                        <div>Provider id:
-                                            <span>
-                                                {{batch.providerId}}
-                                            </span>
-                                        </div>
+                                            <div>Provider id:
+                                                <span>
+                                                    {{batch.providerId}}
+                                                </span>
+                                            </div>
                                         {{/if}}
                                         {{#if batch.errorStatusCode}}
-                                        <div>
-                                            Failure status code: <span>{{batch.errorStatusCode}}</span>
-                                        </div>
+                                            <div>
+                                                Failure status code: <span>{{batch.errorStatusCode}}</span>
+                                            </div>
                                         {{/if}}
                                         {{#if batch.errorMessage}}
-                                        <code>{{batch.errorMessage}}</code>
+                                            <span class="error">{{batch.errorMessage}}</span>
                                         {{/if}}
                                     </div>
                                     {{#if batch.errorMessage}}
@@ -355,6 +355,13 @@
                         </div>
                     </tr>
                     {{/each}}
+                    {{#unless this.emailBatchesData}}
+                    <tr>
+                        <td>
+                            <div class="gh-email-debug-empty-list">No batch data.</div>
+                        </td>
+                    </tr>
+                    {{/unless}}
                     {{!-- <tr>
                         <div class="gh-list-data gh-email-debug-batch-col-status">
                             <span class="failed">Failed</span>
@@ -373,7 +380,7 @@
                                 <div class="detailtext">
                                     <div>Provider id:  <span>20220824043031.b31949925525913d@m.ghost.io</span></div>
                                     <div>Failure status code: <span>500</span></div>
-                                    <code>Mailgun Error 500: Internal server error</code>
+                                    <span class="error">Mailgun Error 500: Internal server error</span>
                                 </div>
                                 <div class="download-icon">{{svg-jar "download" title="Download full failure message"}}</div>
                             </div>
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 7cf07f0e99..dcd53acf9d 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -3315,7 +3315,7 @@ p.theme-validation-details {
 }
 
 .gh-email-debug-batch-col-status .failed {
-    color: var(--red);
+    color: color-mod(var(--red) l(-2%));
 }
 
 .gh-email-debug-batch-col-status .failed::before {
@@ -3352,6 +3352,11 @@ p.theme-validation-details {
     word-break: break-all;
 }
 
+.gh-email-debug-batch-col-details .error {
+    color: color-mod(var(--red) l(-2%));
+    font-weight: unset;
+}
+
 .gh-email-debug-batch-col-segment span {
     display: inline-block;
     border-radius: 2px;
@@ -3439,12 +3444,12 @@ p.theme-validation-details {
 }
 
 .gh-email-debug-readmore-error span {
-    max-width: calc(100%-100px);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     overflow: hidden;
-    color: color-mod(var(--red) l(-8%));
+    color: color-mod(var(--red) l(-2%));
+    word-break: break-all;
 }
 
 .gh-email-debug-readmore-error .toggle-checkbox:checked ~ span {
@@ -3452,6 +3457,7 @@ p.theme-validation-details {
     -webkit-box-orient: unset;
     -webkit-line-clamp: unset;
     overflow: unset;
+    word-break: break-word;
 }
 
 .gh-email-debug-readmore-error .toggle-checkbox:checked ~ label {
@@ -3475,5 +3481,6 @@ p.theme-validation-details {
     border-radius: 2px;
     height: 14px;
     margin-top: 3px;
+    margin-left: 8px;
     background: var(--whitegrey);
 }
\ No newline at end of file