Better bootstrap markup for the account registration form

CHANGES.md

@@ -4,6 +4,7 @@
 
 - Bugfix. Handler not triggered when submitting MUC password form 2nd time
 - Bugfix. MUC features weren't being refreshed when saving the config form
+- #1190 MUC Participants column disappears in certain viewport widths
 - #1214 Setting `allow_contact_requests` to `false` has no effect
 - #1222 Adding a bookmark should prefill the room name
 

css/converse.css

@@ -10014,6 +10014,7 @@ body.reset {
   #conversejs.converse-mobile #controlbox .brand-heading-container {
     flex: 0 0 100%;
     max-width: 100%;
+    margin-bottom: 1em;
     text-align: center; }
     #conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-heading,
     #conversejs.converse-mobile #controlbox .brand-heading-container .brand-heading {

dist/converse.js

@@ -79553,13 +79553,13 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<!-- src/templates/form_username.html -->\n';
+__p += '<!-- src/templates/form_username.html -->\n<div class="form-group">\n    ';
  if (o.label) { ;
-__p += '\n<label>\n    ' +
+__p += '\n    <label>\n        ' +
 __e(o.label) +
-'\n</label>\n';
+'\n    </label>\n    ';
  } ;
-__p += '\n<div class="input-group">\n    <input name="' +
+__p += '\n    <div class="input-group">\n        <div class="input-group-prepend">\n            <input name="' +
 __e(o.name) +
 '" type="' +
 __e(o.type) +
@@ -79573,11 +79573,11 @@ __p += '\n        ';
  if (o.required) { ;
 __p += ' class="required" ';
  } ;
-__p += ' />\n    <span title="' +
+__p += ' />\n            <div class="input-group-text col" title="' +
 __e(o.domain) +
 '">' +
 __e(o.domain) +
-'</span>\n</div>\n';
+'</div>\n        </div>\n    </div>\n</div>\n';
 return __p
 };
 

sass/_controlbox.scss

@@ -443,6 +443,7 @@
 
         .brand-heading-container {
             @include make-col(12);
+            margin-bottom: 1em;
             text-align: center;
             .brand-heading {
                 font-size: 150%;

src/templates/form_username.html

-{[ if (o.label) { ]}
-<label>
+<div class="form-group">
+    {[ if (o.label) { ]}
+    <label>
         {{{o.label}}}
-</label>
-{[ } ]}
-<div class="input-group">
+    </label>
+    {[ } ]}
+    <div class="input-group">
+        <div class="input-group-prepend">
             <input name="{{{o.name}}}" type="{{{o.type}}}"
                 {[ if (o.value) { ]} value="{{{o.value}}}" {[ } ]}
                 {[ if (o.required) { ]} class="required" {[ } ]} />
-    <span title="{{{o.domain}}}">{{{o.domain}}}</span>
+            <div class="input-group-text col" title="{{{o.domain}}}">{{{o.domain}}}</div>
+        </div>
+    </div>
 </div>