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,34 +93,38 @@ export default class MobileChannelHeader extends React.PureComponent<Props> {
         }
 
         return (
-            <nav
+            <div className='row header'>
-                id='navbar'
+                <div id='navbar_wrapper'>
-                className='navbar navbar-default navbar-fixed-top'
+                    <nav
-                role='navigation'
+                        id='navbar'
-            >
+                        className='navbar navbar-default navbar-fixed-top'
-                <div className='container-fluid theme'>
+                        role='navigation'
-                    <div className='navbar-header'>
+                    >
-                        <CollapseLhsButton/>
+                        <div className='container-fluid theme'>
-                        <div className={classNames('navbar-brand', {GlobalThreads___title: inGlobalThreads})}>
+                            <div className='navbar-header'>
-                            {heading}
+                                <CollapseLhsButton/>
+                                <div className={classNames('navbar-brand', {GlobalThreads___title: inGlobalThreads})}>
+                                    {heading}
+                                </div>
+                                <div className='spacer'/>
+                                {channel && (
+                                    <ChannelInfoButton
+                                        channel={channel}
+                                    />
+                                )}
+                                {channel && (
+                                    <MobileChannelHeaderPlugins
+                                        channel={channel}
+                                        isDropdown={false}
+                                    />
+                                )}
+                                <ShowSearchButton/>
+                                <CollapseRhsButton/>
+                            </div>
                         </div>
-                        <div className='spacer'/>
+                    </nav>
-                        {channel && (
-                            <ChannelInfoButton
-                                channel={channel}
-                            />
-                        )}
-                        {channel && (
-                            <MobileChannelHeaderPlugins
-                                channel={channel}
-                                isDropdown={false}
-                            />
-                        )}
-                        <ShowSearchButton/>
-                        <CollapseRhsButton/>
-                    </div>
                 </div>
-            </nav>
+            </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;
     }