Show setting in column, fix button width sizes

less/header.less

@@ -108,6 +108,8 @@
 	}
 
 	.navbar-toggle {
+		width: 44px;
+
 		.notification-icon {
 			position: absolute;
 			left: -13px;

lib/persona.js

@@ -249,18 +249,13 @@ $(document).ready(function() {
 					});
 			}
 
-			// for debugging
-			// window.navSlideout = navSlideout;
-			// window.chatsSlideout = chatsSlideout;
-
-
 			// add a checkbox in the user settings page
 			// so users can swap the sides the menus appear on
 
 			function setupSetting() {
 				if (ajaxify.data.template['account/settings'] && !document.getElementById('persona:menus:legacy-layout')) {
-					$('<div class="col-xs-12 hidden-md"><div class="well checkbox"><label><input type="checkbox" id="persona:menus:legacy-layout"/><strong>Switch which side each mobile menu is on</strong></label></div></div>')
-						.appendTo('#content .account > .row')
+					$('<div class="well checkbox"><label><input type="checkbox" id="persona:menus:legacy-layout"/><strong>Switch which side each mobile menu is on</strong></label></div>')
+						.appendTo('#content .account > .row > div:first-child')
 						.find('input')
 						.prop('checked', Storage.getItem('persona:menus:legacy-layout', 'true'))
 						.change(function (e) {

templates/partials/menu.tpl

@@ -7,7 +7,7 @@
 				</button>
 				<button type="button" class="navbar-toggle hidden" id="mobile-chats">
 					<span component="chat/icon" class="notification-icon fa fa-fw fa-comments" data-content="0"></span>
-					<i class="fa fa-comment-o"></i>
+					<i class="fa fa-comment-o fa-fw"></i>
 				</button>
 
 				<!-- IF brand:logo -->