Fix various layout concerns with the new room list

It had ~32px of overflow causing a horizontal scrollbar. Turns out the layout engine gets confused when hidden elements are at the end of a flexbox, so we just move them higher in the DOM (where they logically still make sense).

The remaining changes are all alignment and misc changes in that respect, and probably not obvious.

src/components/views/rooms/RoomSublist2.tsx

@@ -237,11 +237,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                             >
                                 <span>{this.props.label}</span>
                             </AccessibleButton>
+                            {this.renderMenu()}
+                            {addRoomButton}
                             <div className="mx_RoomSublist2_badgeContainer">
                                 {badge}
                             </div>
-                            {this.renderMenu()}
-                            {addRoomButton}
                         </div>
                     );
                 }}