Fix wrongly positioned menu when opening it and switching to landscape

This could be reproduced on tablet or large phone (as long as portrait mode shows a collapsible menu and landscape mode shows normal menu) or when resizing the browser on desktop.

client/css/style.css

@@ -353,26 +353,6 @@ kbd {
 	overflow: hidden;
 }
 
-#viewport {
-	height: 100%;
-	transition: transform 160ms, -webkit-transform 160ms;
-	-webkit-transform: translateZ(0);
-	transform: translateZ(0);
-}
-
-#viewport.menu-open {
-	-webkit-transform: translate3d(220px, 0, 0);
-	transform: translate3d(220px, 0, 0);
-}
-
-#viewport.menu-dragging {
-	transition: none !important;
-}
-
-#viewport.menu-open .messages {
-	pointer-events: none;
-}
-
 #chat button,
 #form button,
 #chat .user {
@@ -2015,6 +1995,26 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		font-size: 15px;
 	}
 
+	#viewport {
+		height: 100%;
+		transition: transform 160ms, -webkit-transform 160ms;
+		-webkit-transform: translateZ(0);
+		transform: translateZ(0);
+	}
+
+	#viewport.menu-open {
+		-webkit-transform: translate3d(220px, 0, 0);
+		transform: translate3d(220px, 0, 0);
+	}
+
+	#viewport.menu-dragging {
+		transition: none !important;
+	}
+
+	#viewport.menu-open .messages {
+		pointer-events: none;
+	}
+
 	#sidebar,
 	#footer {
 		left: -220px;