EDM-3395: Ensure paddings are defined for main components

[celdrake]

In OCP 4.19 and 4.20, some expressions that apply padding to main components are not evaluating properly because some Patternfly CSS variables are undefined.

Until the fixes are done in the OCP console, we provide a workaround for our application.

Summary by CodeRabbit

• Style
  • Refined page layout styling with adjusted padding for improved visual presentation and consistency.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a79e591 and 8ac8d51.

📒 Files selected for processing (1)

• apps/ocp-plugin/src/components/common/WithPageLayout.tsx

---

Walkthrough

Applied inline styling to the page layout component by introducing a new ocpPageRootStyles constant and wrapping content in a styled div instead of a fragment. Added comments explaining padding adjustments.

Changes

Cohort / File(s)	Summary
Page Layout Styling apps/ocp-plugin/src/components/common/WithPageLayout.tsx	Introduced ocpPageRootStyles constant and replaced fragment wrapper with styled div container. Nested PageNavigation and children inside styled container with inline padding adjustments.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly relates to the main change: adding inline padding styles (ocpPageRootStyles) to ensure paddings are properly defined for the OCP page layout component, which addresses the stated objective of fixing padding issues in OCP 4.19/4.20.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[celdrake]

Using "0" does not seem to work with the calc expressions

.pf-v6-c-page__main-section.pf-m-padding {
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
  padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
  padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
}