Add some padding to form error message

css/converse.css

@@ -10036,6 +10036,9 @@ body.converse-fullscreen {
   font-size: 80%;
   font-weight: normal; }
 
+#conversejs form .error-feedback {
+  margin-bottom: 0.5em; }
+
 #conversejs form .form-check-label {
   margin-top: 0.3rem; }
 

dist/converse.js

@@ -93694,9 +93694,9 @@ var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 __p += '<!-- src/templates/chatroom_invite.html -->\n<div class="suggestion-box room-invite">\n    <form>\n        ';
  if (o.error_message) { ;
-__p += ' <span class="error">' +
+__p += ' <div class="error error-feedback">' +
 __e(o.error_message) +
-'</span> ';
+'</div> ';
  } ;
 __p += '\n        <div class="form-group">\n            <input class="form-control invited-contact suggestion-box__input"\n                   placeholder="' +
 __e(o.label_invitation) +

sass/_forms.scss

@@ -5,6 +5,9 @@
     }
 
     form {
+        .error-feedback {
+            margin-bottom: 0.5em;
+        }
         .form-check-label {
             margin-top: $form-check-input-margin-y;
         }

src/templates/chatroom_invite.html

 <div class="suggestion-box room-invite">
     <form>
-        {[ if (o.error_message) { ]} <span class="error">{{{o.error_message}}}</span> {[ } ]}
+        {[ if (o.error_message) { ]} <div class="error error-feedback">{{{o.error_message}}}</div> {[ } ]}
         <div class="form-group">
             <input class="form-control invited-contact suggestion-box__input"
                    placeholder="{{{o.label_invitation}}}"