fix flex-tab on mobile

packages/rocketchat-theme/client/imports/base.less

@@ -3128,16 +3128,9 @@ body:not(.is-cordova) {
 	.flex-tab {
 		position: relative;
 		display: none;
-		top: 0;
-		bottom: 0;
-		min-width: @flex-tab-width;
-		z-index: 110;
+		width: @flex-tab-width;
+		z-index: 11;
 		overflow-x: visible;
-		transition: transform 0.25s cubic-bezier(0.5, 0, 0.1, 1);
-
-		&.opened {
-			display: block;
-		}
 
 		.control {
 			.header {
@@ -3289,8 +3282,7 @@ body:not(.is-cordova) {
 	.flex-tab-bar {
 		min-width: 40px;
 		height: 100%;
-		z-index: 130;
-		will-change: transform;
+		z-index: 1;
 
 		.tab-button {
 			position: relative;
@@ -3327,6 +3319,12 @@ body:not(.is-cordova) {
 			}
 		}
 	}
+
+	&.opened {
+		.flex-tab {
+			display: block;
+		}
+	}
 }
 
 .list-view {
@@ -4381,11 +4379,13 @@ body:not(.is-cordova) {
 }
 
 @media all and(max-width: 1100px) {
-	#rocket-chat {
-		.flex-tab.opened {
+	.flex-tab-container.opened {
+		.flex-tab {
 			position: absolute;
 			right: 40px;
 			border-width: 0 0 0 1px;
+			z-index: 101;
+			height: 100%;
 		}
 	}
 }
@@ -4402,15 +4402,6 @@ body:not(.is-cordova) {
 			z-index: 120;
 		}
 
-		.main-content,
-		.flex-tab-bar {
-			transition: transform 0.2s linear;
-
-			&.notransition {
-				transition: transform 0;
-			}
-		}
-
 		.fixed-title h2 {
 			margin-left: 45px;
 		}
@@ -4434,6 +4425,20 @@ body:not(.is-cordova) {
 	}
 }
 
+@media all and(max-width: 440px) {
+	.flex-tab-container.opened {
+		.messages-container {
+			display: none;
+		}
+
+		.flex-tab {
+			position: relative;
+			right: auto;
+			border: 0;
+		}
+	}
+}
+
 @media all and(max-height: 400px) {
 	.upload-preview .upload-preview-file {
 		height: 100px;

packages/rocketchat-ui-flextab/flex-tab/flexTabBar.coffee

@@ -8,8 +8,6 @@ Template.flexTabBar.helpers
 	visible: ->
 		if @groups.indexOf(Template.instance().tabBar.currentGroup()) is -1
 			return 'hidden'
-	opened: ->
-		return Template.instance().tabBar.getState()
 	template: ->
 		return Template.instance().tabBar.getTemplate()
 	flexData: ->

packages/rocketchat-ui-flextab/flex-tab/flexTabBar.html

 <template name="flexTabBar">
-	<section class="flex-tab border-component-color {{opened}}">
+	<section class="flex-tab border-component-color">
 		{{> Template.dynamic template=template data=flexData}}
 	</section>
 	<div class="flex-tab-bar" role="toolbar">

packages/rocketchat-ui/views/app/room.coffee

@@ -13,6 +13,9 @@ userCanDrop = (_id) ->
 	return !RocketChat.roomTypes.readOnly _id, Meteor.user()
 
 Template.room.helpers
+	flexOpened: ->
+		return Template.instance().tabBar.getState()
+
 	embeddedVersion: ->
 		return RocketChat.Layout.isEmbedded()
 

packages/rocketchat-ui/views/app/room.html

@@ -5,7 +5,7 @@
 				{{_ "Drop_to_upload_file"}}
 			</div>
 		</div>
-		<div class="flex-tab-container">
+		<div class="flex-tab-container {{flexOpened}}">
 			<section class="messages-container border-component-color flex-tab-main-content {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
 				{{#unless embeddedVersion}}
 				<header class="fixed-title content-background-color border-component-color">