Fix display of zero history indicator

And make sure it hides when messages arrive.

sass/_chatrooms.scss

@@ -97,6 +97,17 @@
         }
     }
 
+    .empty-history-feedback {
+        position: relative;
+        height: 100%;
+        span {
+            width: 100%;
+            text-align: center;
+            position: absolute;
+            margin-top: 50%;
+        }
+    }
+
     .chatroom {
         width: var(--chatroom-width);
         @media screen and (max-height: $mobile-landscape-height){
@@ -330,18 +341,6 @@
             }
         }
 
-        .empty-history-feedback {
-            position: relative;
-            height: 100%;
-            color: var(--text-color-lighten-15-percent);
-            span {
-                width: 100%;
-                text-align: center;
-                position: absolute;
-                margin-top: 50%;
-            }
-        }
-
         .muc-bottom-panel {
             border-top: var(--message-input-border-top);
             height: 3em;

src/components/chat_content.js

@@ -10,7 +10,6 @@ import { html } from 'lit-element';
 import { repeat } from 'lit-html/directives/repeat.js';
 
 const i18n_no_history = __('No message history available.');
-const tpl_no_msgs = html`<div class="empty-history-feedback"><span>${i18n_no_history}</span></div>`
 
 
 // Return a TemplateResult indicating a new day if the passed in message is
@@ -80,7 +79,9 @@ class ChatContent extends CustomElement {
 
     render () {
         const msgs = this.messages;
-        return html`${ !msgs.length ? tpl_no_msgs : repeat(msgs, m => m.get('id'), m => renderMessage(m)) }`;
+        return msgs.length ?
+            html`${repeat(msgs, m => m.get('id'), m => renderMessage(m)) }` :
+            html`<div class="empty-history-feedback form-help"><span>${i18n_no_history}</span></div>`;
     }
 }