From a440eece9e9189a9974639946694e5556594ca49 Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Fri, 8 Apr 2022 14:12:42 +0200
Subject: [PATCH] Make long reports in the notification error log easier to
 read

---
 changedetectionio/static/styles/styles.css        | 12 ++++++++++--
 changedetectionio/static/styles/styles.scss       |  9 ++++++++-
 changedetectionio/templates/_common_fields.jinja  |  2 +-
 changedetectionio/templates/notification-log.html |  2 +-
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index 4a6f2cb3..4cba122a 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/changedetectionio/static/styles/styles.css
@@ -31,7 +31,7 @@ a.github-link {
 
 section.content {
   padding-top: 5em;
-  padding-bottom: 5em;
+  padding-bottom: 1em;
   flex-direction: column;
   display: flex;
   align-items: center;
@@ -185,6 +185,12 @@ body:after, body:before {
   padding: 1rem;
   border-radius: 5px; }
 
+#notification-error-log {
+  border: 1px solid #ccc;
+  padding: 1rem;
+  border-radius: 5px;
+  overflow-wrap: break-word; }
+
 #token-table.pure-table td, #token-table.pure-table th {
   font-size: 80%; }
 
@@ -411,7 +417,9 @@ and also iPads specifically.
     display: block; }
 
 .edit-form {
-  min-width: 70%; }
+  min-width: 70%;
+  /* so it cant overflow */
+  max-width: 95%; }
   .edit-form .box-wrap {
     position: relative; }
   .edit-form .inner {
diff --git a/changedetectionio/static/styles/styles.scss b/changedetectionio/static/styles/styles.scss
index d3949165..e8ed32e2 100644
--- a/changedetectionio/static/styles/styles.scss
+++ b/changedetectionio/static/styles/styles.scss
@@ -245,6 +245,12 @@ body:after, body:before {
     border-radius: 5px;
 }
 
+#notification-error-log {
+    border: 1px solid #ccc;
+    padding: 1rem;
+    border-radius: 5px;
+    overflow-wrap: break-word;
+}
 
 #token-table {
     &.pure-table td, &.pure-table th {
@@ -586,7 +592,8 @@ $form-edge-padding: 20px;
 
 .edit-form {
   min-width: 70%;
-
+  /* so it cant overflow */
+  max-width: 95%;
   .box-wrap {
     position: relative;
   }
diff --git a/changedetectionio/templates/_common_fields.jinja b/changedetectionio/templates/_common_fields.jinja
index b18e30b4..6a5ec7c2 100644
--- a/changedetectionio/templates/_common_fields.jinja
+++ b/changedetectionio/templates/_common_fields.jinja
@@ -13,7 +13,7 @@
                             <div class="pure-form-message-inline">
                               <ul>
                                 <li>Use <a target=_new href="https://github.com/caronc/apprise">AppRise URLs</a> for notification to just about any service! <i><a target=_new href="https://github.com/dgtlmoon/changedetection.io/wiki/Notification-configuration-notes">Please read the notification services wiki here for important configuration notes</a></i>.</li>
-                                <li><code>discord://</code> will silently fail if the total message length is more than 2000 chars.</li>
+                                <li><code>discord://</code> will silently fail if the total message length is <strong>more than 2000 chars.</strong></li>
                                 <li><code>tgram://</code> bots cant send messages to other bots, so you should specify chat ID of non-bot user.</li>
                                 <li>Go here for <a href="{{url_for('notification_logs')}}">Notification debug logs</a></li>
                               </ul>
diff --git a/changedetectionio/templates/notification-log.html b/changedetectionio/templates/notification-log.html
index 26cc5cb6..6fd92a1b 100644
--- a/changedetectionio/templates/notification-log.html
+++ b/changedetectionio/templates/notification-log.html
@@ -5,7 +5,7 @@
      <div class="inner">
 
          <h4 style="margin-top: 0px;">The following issues were detected when sending notifications</h4>
-                <div id="notification-customisation">
+                <div id="notification-error-log">
                 <ul style="font-size: 80%; margin:0px; padding: 0 0 0 7px">
                 {% for log in logs|reverse %}
                     <li>{{log}}</li>