fix: Fixes right menu layout in different screen sizes (#14689)

superset-frontend/src/components/Menu/Menu.tsx

@@ -23,7 +23,7 @@ import { Global } from '@emotion/react';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { MainNav as DropdownMenu, MenuMode } from 'src/common/components';
 import { Link } from 'react-router-dom';
-import { Row, Col } from 'antd';
+import { Row, Col, Grid } from 'antd';
 import Icon from 'src/components/Icon';
 import RightMenu from './MenuRight';
 import { Languages } from './LanguagePicker';
@@ -137,11 +137,14 @@ const StyledHeader = styled.header`
 
 const { SubMenu } = DropdownMenu;
 
+const { useBreakpoint } = Grid;
+
 export function Menu({
   data: { menu, brand, navbar_right: navbarRight, settings },
   isFrontendRoute = () => false,
 }: MenuProps) {
   const [showMenu, setMenu] = useState<MenuMode>('horizontal');
+  const screens = useBreakpoint();
 
   useEffect(() => {
     function handleResize() {
@@ -216,7 +219,7 @@ export function Menu({
         `}
       />
       <Row>
-        <Col lg={12} md={24} sm={24} xs={24}>
+        <Col md={16} xs={24}>
           <a className="navbar-brand" href={brand.path}>
             <img width={brand.width} src={brand.icon} alt={brand.alt} />
           </a>
@@ -245,8 +248,9 @@ export function Menu({
             })}
           </DropdownMenu>
         </Col>
-        <Col lg={12} md={24} sm={24} xs={24}>
+        <Col md={8} xs={24}>
           <RightMenu
+            align={screens.md ? 'flex-end' : 'flex-start'}
             settings={settings}
             navbarRight={navbarRight}
             isFrontendRoute={isFrontendRoute}