MM-63851 Fix mobile view (#30836)

* MM-63851 Re-add divs around mobile view header

* Revert layout changes in mobile view header

* Finish removing CSS rule

webapp/channels/src/components/mobile_channel_header/mobile_channel_header.tsx

@@ -93,6 +93,8 @@ export default class MobileChannelHeader extends React.PureComponent<Props> {
         }
 
         return (
+            <div className='row header'>
+                <div id='navbar_wrapper'>
                     <nav
                         id='navbar'
                         className='navbar navbar-default navbar-fixed-top'
@@ -121,6 +123,8 @@ export default class MobileChannelHeader extends React.PureComponent<Props> {
                             </div>
                         </div>
                     </nav>
+                </div>
+            </div>
         );
     }
 }

webapp/channels/src/sass/responsive/_mobile.scss

@@ -10,9 +10,8 @@
             }
 
             .navbar-header {
-                display: flex;
+                margin: 0 -15px;
-                align-items: center;
+                float: none;
-                gap: 4px;
 
                 .dropdown__icon {
                     display: inline-block;
@@ -20,10 +19,6 @@
                     height: 16px;
                     background-size: 100% 100%;
                 }
-
-                button.navbar-toggle.navbar-right__icon {
-                    margin: 0;
-                }
             }
 
             .navbar-toggle {
@@ -683,8 +678,7 @@
     }
 
     .sidebar--left .team__header .Avatar,
-    #SidebarContainer .team__header .Avatar,
+    #SidebarContainer .team__header .Avatar {
-    .team__header .Avatar {
         display: none;
     }