Fix logout button styling on mobile

less/header.less

@@ -421,24 +421,26 @@ label.dropdown-toggle {
 	}
 }
 
-.dropdown-menu > li > form > button {
+.dropdown-menu > li > form {
-	text-align: left;
+	> button, > .btn-link {
-	width: 100%;
+		text-align: left;
-	background: none;
+		width: 100%;
-	border: none;
+		background: none;
-	display: block;
+		border: none;
-	padding: 3px 20px;
+		display: block;
-	clear: both;
+		padding: 3px 20px;
-	font-weight: normal;
+		clear: both;
-	line-height: @line-height-base;
+		font-weight: normal;
-	color: @dropdown-link-color;
+		line-height: @line-height-base;
-	white-space: nowrap; // prevent links from randomly breaking onto new lines
+		color: @dropdown-link-color;
-
+		white-space: nowrap; // prevent links from randomly breaking onto new lines
-	&:hover,
+
-	&:focus {
+		&:hover,
-		text-decoration: none;
+		&:focus {
-		color: @dropdown-link-hover-color;
+			text-decoration: none;
-		background-color: @dropdown-link-hover-bg;
+			color: @dropdown-link-hover-color;
+			background-color: @dropdown-link-hover-bg;
+		}
 	}
 }
 

less/mobile.less

@@ -63,13 +63,13 @@
 		background-color: #1D1F20;
 		background-image: linear-gradient(145deg, #1D1F20, #404348);
 
-		a {
+		a, button {
 			color: #fff;
 			text-decoration: none;
-		}
 
-		a:hover {
+			&:hover {
-			text-decoration: underline;
+				text-decoration: underline;
+			}
 		}
 
 		.chat-list {
@@ -186,18 +186,20 @@
 	}
 
 	.menu-section-list {
-		padding:0;
+		padding: 0;
 		margin: 10px 0;
-		list-style:none;
+		list-style: none;
 
-		a {
+		a, button {
 			display: block;
 			padding: 10px 20px;
-		}
+			text-align: left;
+			width: 100%;
 
-		a:hover {
+			&:hover {
-			background-color: rgba(255, 255, 255, 0.1);
+				background-color: rgba(255, 255, 255, 0.1);
-			text-decoration: none;
+				text-decoration: none;
+			}
 		}
 	}
 

templates/partials/menu.tpl

@@ -127,7 +127,9 @@
 								<form method="post" action="{relative_path}/logout">
 									<input type="hidden" name="_csrf" value="{config.csrf_token}">
 									<input type="hidden" name="noscript" value="true">
-									<button type="submit"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></button>
+									<button type="submit" class="btn btn-link">
+										<i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span>
+									</button>
 								</form>
 							</li>
 						</ul>