From b3872c3f13951d830ed25c0680fa2cc40100bd55 Mon Sep 17 00:00:00 2001
From: Robert Sun <107655677+rsun19@users.noreply.github.com>
Date: Mon, 17 Jul 2023 11:54:26 -0400
Subject: [PATCH] removed preview toggle when width < 420px

---
 src/components/Header/Header.tsx | 2 +-
 src/components/Header/Tools.tsx  | 4 +++-
 src/hooks/useWindowWidth.tsx     | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 3bd72d6ee..b5afb9389 100644
--- a/src/components/Header/Header.tsx
+++ b/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>
diff --git a/src/components/Header/Tools.tsx b/src/components/Header/Tools.tsx
index fe636d7ff..e692559b2 100644
--- a/src/components/Header/Tools.tsx
+++ b/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>
diff --git a/src/hooks/useWindowWidth.tsx b/src/hooks/useWindowWidth.tsx
index 16cca1a58..8bbd9f534 100644
--- a/src/hooks/useWindowWidth.tsx
+++ b/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;