Consistent placing of modal buttons

css/converse.css

@@ -9592,6 +9592,8 @@ body.reset {
     background-color: rgba(0, 0, 0, 0.4); }
     #conversejs .modal .modal-body p {
       padding: 0.25rem 0; }
+    #conversejs .modal .modal-footer {
+      justify-content: flex-start; }
   #conversejs .selected {
     color: var(--link-color) !important; }
   #conversejs .circle {

dist/converse.js

@@ -100682,7 +100682,7 @@ __e(o.label_nickname) +
 __e(o.nickname) +
 '"\n                               class="form-control"\n                               placeholder="' +
 __e(o.nickname_placeholder) +
-'"/>\n                    </div>\n                </div>\n                <div class="modal-footer">\n                    <button type="submit" class="btn btn-primary">' +
+'"/>\n                    </div>\n                    <button type="submit" class="btn btn-primary">' +
 __e(o.label_add) +
 '</button>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n';
 return __p
@@ -100844,7 +100844,7 @@ __p += '<!-- src/templates/chat_status_modal.html -->\n<!-- Change status Modal
 __e(o.modal_title) +
 '</h5>\n                <button type="button" class="close" data-dismiss="modal" aria-label="' +
 __e(o.label_close) +
-'">\n                    <span aria-hidden="true">&times;</span>\n                </button>\n            </div>\n            <form class="set-xmpp-status" id="set-xmpp-status">\n                <div class="modal-body">\n                    <div class="form-group">\n                        <div class="custom-control custom-radio">\n                            <input ';
+'">\n                    <span aria-hidden="true">&times;</span>\n                </button>\n            </div>\n            <div class="modal-body">\n                <form class="converse-form set-xmpp-status" id="set-xmpp-status">\n                    <div class="form-group">\n                        <div class="custom-control custom-radio">\n                            <input ';
  if (o.status === 'online') { ;
 __p += ' checked="checked" ';
  } ;
@@ -100868,17 +100868,17 @@ __p += ' checked="checked" ';
  } ;
 __p += '\n                                   type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">\n                            <label class="custom-control-label" for="radio-xa">\n                                <span class="far fa-circle chat-status chat-status--xa"></span>&nbsp;' +
 __e(o.label_xa) +
-'</label>\n                        </div>\n                    </div>\n                    <div class="btn-group w-100">\n                        <input name="status_message" type="text" class="form-control" \n                               value="' +
+'</label>\n                        </div>\n                    </div>\n                    <div class="form-group">\n                        <div class="btn-group w-100">\n                            <input name="status_message" type="text" class="form-control" \n                                value="' +
 __e(o.status_message) +
 '" placeholder="' +
 __e(o.placeholder_status_message) +
-'">\n                        <span class="clear-input fa fa-times ';
+'">\n                            <span class="clear-input fa fa-times ';
  if (!o.status_message) { ;
 __p += ' hidden ';
  } ;
-__p += '"></span>\n                    </div>\n                </div>\n                <div class="modal-footer">\n                    <button type="submit" class="btn btn-primary">' +
+__p += '"></span>\n                        </div>\n                    </div>\n                    <button type="submit" class="btn btn-primary">' +
 __e(o.label_save) +
-'</button>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n';
+'</button>\n                </form>\n            </div>\n        </div>\n    </div>\n</div>\n';
 return __p
 };
 

sass/_core.scss

@@ -272,6 +272,10 @@ body.reset {
                 padding: 0.25rem 0;
             }
         }
+
+        .modal-footer {
+            justify-content: flex-start;
+        }
     }
 
     .selected {

src/templates/add_contact_modal.html

@@ -21,8 +21,6 @@
                                class="form-control"
                                placeholder="{{{o.nickname_placeholder}}}"/>
                     </div>
-                </div>
-                <div class="modal-footer">
                     <button type="submit" class="btn btn-primary">{{{o.label_add}}}</button>
                 </div>
             </form>

src/templates/chat_status_modal.html

@@ -8,8 +8,8 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <form class="set-xmpp-status" id="set-xmpp-status">
-                <div class="modal-body">
+            <div class="modal-body">
+                <form class="converse-form set-xmpp-status" id="set-xmpp-status">
                     <div class="form-group">
                         <div class="custom-control custom-radio">
                             <input {[ if (o.status === 'online') { ]} checked="checked" {[ } ]}
@@ -36,16 +36,16 @@
                                 <span class="far fa-circle chat-status chat-status--xa"></span>&nbsp;{{{o.label_xa}}}</label>
                         </div>
                     </div>
-                    <div class="btn-group w-100">
-                        <input name="status_message" type="text" class="form-control" 
-                               value="{{{o.status_message}}}" placeholder="{{{o.placeholder_status_message}}}">
-                        <span class="clear-input fa fa-times {[ if (!o.status_message) { ]} hidden {[ } ]}"></span>
+                    <div class="form-group">
+                        <div class="btn-group w-100">
+                            <input name="status_message" type="text" class="form-control" 
+                                value="{{{o.status_message}}}" placeholder="{{{o.placeholder_status_message}}}">
+                            <span class="clear-input fa fa-times {[ if (!o.status_message) { ]} hidden {[ } ]}"></span>
+                        </div>
                     </div>
-                </div>
-                <div class="modal-footer">
                     <button type="submit" class="btn btn-primary">{{{o.label_save}}}</button>
-                </div>
-            </form>
+                </form>
+            </div>
         </div>
     </div>
 </div>