refactor: use useWindowSize instead of useMediaQuery for brackpoint check

Author: dcoa

src/authz-module/components/AuthZTitle.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import {
   Breadcrumb, Col, Container, Row, Button, Badge,
   Stack,
-  useMediaQuery,
+  useWindowSize,
   breakpoints,
 } from '@openedx/paragon';
 
@@ -40,7 +40,10 @@ export const ActionButton = ({ label, icon, onClick }: Action) => (
 const AuthZTitle = ({
   activeLabel, navLinks = [], pageTitle, pageSubtitle, actions = [],
 }: AuthZTitleProps) => {
-  const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
+  const { width = window.innerWidth } = useWindowSize();
+  const minWidth = breakpoints.large?.minWidth || 1200;
+  const isDesktop = width > minWidth;
+
   return (
     <Container className="p-5 bg-light-100">
       <Breadcrumb
@@ -58,22 +61,22 @@ const AuthZTitle = ({
         <Col xs={12} md={5}>
           <Stack className="justify-content-end" direction={isDesktop ? 'horizontal' : 'vertical'}>
             {
-            actions.map((action, index) => {
-              const content = isValidElement(action)
-                ? action
-                : <ActionButton {...action as Action} />;
-              const key = isValidElement(action)
-                ? action.key
-                : (action as Action).label;
-              return (
-                <Fragment key={`authz-header-action-${key}`}>
-                  {content}
-                  {(index === actions.length - 1) ? null
-                    : (<hr className="mx-lg-5" />)}
-                </Fragment>
-              );
-            })
-          }
+              actions.map((action, index) => {
+                const content = isValidElement(action)
+                  ? action
+                  : <ActionButton {...action as Action} />;
+                const key = isValidElement(action)
+                  ? action.key
+                  : (action as Action).label;
+                return (
+                  <Fragment key={`authz-header-action-${key}`}>
+                    {content}
+                    {(index === actions.length - 1) ? null
+                      : (<hr className="mx-lg-5" />)}
+                  </Fragment>
+                );
+              })
+            }
           </Stack>
         </Col>
       </Row>