Make long reports in the notification error log easier to read

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 {

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

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>

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>