From a13ff527e3770716550570257aee46a0e4bb3494 Mon Sep 17 00:00:00 2001
From: mcoker <mcoker@redhat.com>
Date: Mon, 21 Apr 2025 19:48:36 -0500
Subject: [PATCH] fix(example): keeps example content from overflowing content
 area

---
 packages/documentation-framework/templates/mdx.css | 4 ++++
 packages/documentation-framework/templates/mdx.js  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css
index ac41f7cb44..7530aa56d2 100644
--- a/packages/documentation-framework/templates/mdx.css
+++ b/packages/documentation-framework/templates/mdx.css
@@ -23,3 +23,7 @@ p.pf-v6-c-content--p.ws-p {
 .ws-back-to-top {
   z-index: var(--pf-t--global--z-index--2xl);
 }
+
+.ws-example-page-wrapper {
+  max-width: min(100%, 825px);
+}
diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
index ae2ccbb621..330f838e9a 100644
--- a/packages/documentation-framework/templates/mdx.js
+++ b/packages/documentation-framework/templates/mdx.js
@@ -110,7 +110,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
   const ChildComponent = () => (
     <div className={source !== 'landing-pages' ? 'pf-v6-l-flex' : ''}>
       {toc.length > 1 && <TableOfContents items={toc} />}
-      <Stack hasGutter style={{ ...(source !== 'landing-pages' && { maxWidth: '825px' }) }}>
+      <Stack hasGutter className={(source !== 'landing-pages' && 'ws-example-page-wrapper')}>
         {InlineAlerts}
         <Component />
         {functionDocumentation.length > 0 && (