style: add mx-5 to divider to avoid wide growth

Author: dcoa

src/authz-module/components/AuthZTitle.tsx

@@ -5,6 +5,8 @@ import { Link } from 'react-router-dom';
 import {
   Breadcrumb, Col, Container, Row, Button, Badge,
   Stack,
+  useMediaQuery,
+  breakpoints,
 } from '@openedx/paragon';
 
 interface BreadcrumbLink {
@@ -37,7 +39,9 @@ export const ActionButton = ({ label, icon, onClick }: Action) => (
 
 const AuthZTitle = ({
   activeLabel, navLinks = [], pageTitle, pageSubtitle, actions = [],
-}: AuthZTitleProps) => (
+}: AuthZTitleProps) => {
+    const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
+  return (
   <Container className="p-5 bg-light-100">
     <Breadcrumb
       linkAs={Link}
@@ -51,8 +55,8 @@ const AuthZTitle = ({
           ? <h3><Badge className="py-2 px-3 font-weight-normal" variant="light">{pageSubtitle}</Badge></h3>
           : pageSubtitle}
       </Col>
-      <Col xs={12} md={5}>
-        <Stack gap={3} direction="horizontal">
+      <Col xs={12} md={5} >
+        <Stack className="justify-content-end" direction={isDesktop ? "horizontal" :"vertical" }>
           {
             actions.map((action, index) => {
               const content = isValidElement(action)
@@ -65,7 +69,7 @@ const AuthZTitle = ({
                 <Fragment key={`authz-header-action-${key}`}>
                   {content}
                   {(index === actions.length - 1) ? null
-                    : (<hr className="border-right" />)}
+                    : (<hr className='mx-lg-5'/>)}
                 </Fragment>
               );
             })
@@ -74,6 +78,6 @@ const AuthZTitle = ({
       </Col>
     </Row>
   </Container>
-);
+)};
 
 export default AuthZTitle;

src/authz-module/index.scss

@@ -1,12 +1,24 @@
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+
 .authz-libraries {
-  --height-action-devider: 30px;
+  --height-action-divider: 30px;
 
   .pgn__breadcrumb li:first-child a {
     color: var(--pgn-color-breadcrumb-active);
     text-decoration: none;
   }
+
   hr {
-    height: var(--height-action-devider);
+    border-top: var(--pgn-size-border-width) solid var(--pgn-color-border);
+    width: 100%;
+  }
+
+  @media (--pgn-size-breakpoint-min-width-lg) {
+    hr {
+      border-right: var(--pgn-size-border-width) solid var(--pgn-color-border);
+      height: var(--height-action-divider);
+      width: 0;
+    }
   }
 
   .tab-content {
@@ -53,4 +65,4 @@
   // Move toast to the right 
   left: auto;
   right: var(--pgn-spacing-toast-container-gutter-lg);
-}
+}