UI - Improving "real-time updates offline" message

changedetectionio/static/styles/scss/styles.scss

@@ -1130,11 +1130,12 @@ ul {
 }
 
 #realtime-conn-error {
-  position: absolute;
+  position: fixed;
   bottom: 0;
-  left: 30px;
+  left: 0;
   background: var(--color-warning);
   padding: 10px;
   font-size: 0.8rem;
   color: #fff;
+  opacity: 0.8;
 }

changedetectionio/templates/base.html

@@ -236,7 +236,7 @@
     <script src="{{url_for('static_content', group='js', filename='toggle-theme.js')}}" defer></script>
 
     <div id="checking-now-fixed-tab" style="display: none;"><span class="spinner"></span><span>&nbsp;Checking now</span></div>
-    <div id="realtime-conn-error" style="display:none">Offline</div>
+    <div id="realtime-conn-error" style="display:none">Real-time updates offline</div>
   </body>
 
 </html>