From 8ac8d510ba230661ecd5d1f896d2dc68869dcc1f Mon Sep 17 00:00:00 2001
From: Celia Amador <camadorg@redhat.com>
Date: Fri, 27 Feb 2026 12:15:09 +0100
Subject: [PATCH] EDM-3395: Ensure paddings are defined for main components

---
 .../src/components/common/WithPageLayout.tsx      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/ocp-plugin/src/components/common/WithPageLayout.tsx b/apps/ocp-plugin/src/components/common/WithPageLayout.tsx
index 171786051..f8f7f3adb 100644
--- a/apps/ocp-plugin/src/components/common/WithPageLayout.tsx
+++ b/apps/ocp-plugin/src/components/common/WithPageLayout.tsx
@@ -7,6 +7,17 @@ import PageNavigation from '@flightctl/ui-components/src/components/common/PageN
 import { SystemRestoreProvider } from '@flightctl/ui-components/src/hooks/useSystemRestoreContext';
 import { PermissionsContextProvider } from '@flightctl/ui-components/src/components/common/PermissionsContext';
 
+// The OCP console uses "calc" to calculate padding values for page containers and breadcrumbs.
+// But some CSS variables it uses are undefined, so the "calc" values are invalid.
+const ocpPageRootStyles: React.CSSProperties = {
+  // Ensure page containers have inline padding
+  ['--pf-v6-c-page__main-container--BorderInlineEndWidth' as string]: '0px',
+  ['--pf-v6-c-page__main-container--BorderInlineStartWidth' as string]: '0px',
+  // Ensure page breadcrumbs have inline padding
+  ['--pf-v6-c-page__main-breadcrumb--PaddingInlineStart' as string]: '1rem',
+  ['--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd' as string]: '1rem',
+};
+
 const WithPageLayoutContent = ({ children }: React.PropsWithChildren) => {
   const { mustShowOrganizationSelector } = useOrganizationGuardContext();
 
@@ -15,10 +26,10 @@ const WithPageLayoutContent = ({ children }: React.PropsWithChildren) => {
   }
 
   return (
-    <>
+    <div style={ocpPageRootStyles}>
       <PageNavigation showSettings={false} />
       {children}
-    </>
+    </div>
   );
 };