Merge pull request #2573 from rsun19/fixWhitespaceHeaderIssue

[RHCLOUD-27099] Console landing page has bug where swiping left would reveal whitespace on mobile

src/components/Header/Header.tsx

@@ -44,7 +44,7 @@ export const Header = ({ breadcrumbsProps }: { breadcrumbsProps?: Breadcrumbspro
   const isITLessEnv = ITLess();
   const { pathname } = useLocation();
   const noBreadcrumb = !['/', '/allservices', '/favoritedservices'].includes(pathname);
-  const lg = useWindowWidth();
+  const { lg } = useWindowWidth();
 
   return (
     <Fragment>

src/components/Header/Tools.tsx

@@ -29,6 +29,7 @@ import LibtJWTContext from '../LibJWTContext';
 import { ReduxState } from '../../redux/store';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import { toggleNotificationsDrawer } from '../../redux/actions';
+import useWindowWidth from '../../hooks/useWindowWidth';
 
 const isITLessEnv = ITLess();
 
@@ -82,6 +83,7 @@ const Tools = () => {
     isRhosakEntitled: false,
     isDemoAcc: false,
   });
+  const { xs } = useWindowWidth();
   const user = useSelector(({ chrome: { user } }: ReduxState) => user!);
   const unreadNotifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.data?.filter((isRead) => isRead) || []);
   const isDrawerExpanded = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.isExpanded);
@@ -238,7 +240,7 @@ const Tools = () => {
           },
         })}
       >
-        <BetaSwitcher />
+        {!xs && <BetaSwitcher />}
       </ToolbarItem>
       {isNotificationsEnabled && (
         <ToolbarItem>

src/hooks/useWindowWidth.tsx

@@ -2,16 +2,18 @@ import { useEffect, useState } from 'react';
 
 const useWindowWidth = () => {
   const [lg, setLg] = useState(window.innerWidth >= 1450);
+  const [xs, setXs] = useState(window.innerWidth < 420);
 
   useEffect(() => {
     const handleResize = () => {
       setLg(window.innerWidth >= 1450);
+      setXs(window.innerWidth < 420);
     };
     window.addEventListener('resize', handleResize);
     () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  return lg;
+  return { xs, lg };
 };
 
 export default useWindowWidth;