Add option to display full-width content on automated pages (#49636)

src/automated-pipelines/components/AutomatedPage.tsx

@@ -11,9 +11,10 @@ import { Breadcrumbs } from 'src/frame/components/page-header/Breadcrumbs'
 
 type Props = {
   children: React.ReactNode
+  fullWidth?: boolean
 }
 
-export const AutomatedPage = ({ children }: Props) => {
+export const AutomatedPage = ({ children, fullWidth }: Props) => {
   const { title, intro, renderedPage, miniTocItems, product, permissions } =
     useAutomatedPageContext()
 
@@ -23,6 +24,7 @@ export const AutomatedPage = ({ children }: Props) => {
 
       <div className="container-xl px-3 px-md-6 my-4">
         <ArticleGridLayout
+          fullWidth={fullWidth}
           topper={
             <>
               <div className="d-none d-xl-block my-3 mr-auto width-full">

src/frame/components/article/ArticleGridLayout.tsx

@@ -12,6 +12,7 @@ type Props = {
   children?: React.ReactNode
   className?: string
   supportPortalVaIframeProps?: SupportPortalVaIframeProps
+  fullWidth?: boolean
 }
 export const ArticleGridLayout = ({
   intro,
@@ -20,9 +21,11 @@ export const ArticleGridLayout = ({
   children,
   className,
   supportPortalVaIframeProps,
+  fullWidth,
 }: Props) => {
+  const containerBoxStyles = fullWidth ? '' : styles.containerBox
   return (
-    <Box className={cx(styles.containerBox, className)}>
+    <Box className={cx(containerBoxStyles, className)}>
       {topper && <Box gridArea="topper">{topper}</Box>}
       {intro && (
         <Box id="article-intro" gridArea="intro" className="f4 pb-4">

src/graphql/pages/explorer.tsx

@@ -30,7 +30,7 @@ export default function GQLExplorer({
   return (
     <MainContext.Provider value={mainContext}>
       <AutomatedPageContext.Provider value={automatedPageContext}>
-        <AutomatedPage>
+        <AutomatedPage fullWidth={true}>
           <div>
             {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
             <iframe