Describe the problem
This is an issue with
Please give a clear and concise description of the problem. Which components are affected?
Several components are showing missing paddings due to CSS variables not being defined and paddings being calculated in calc expressions that reference them.
How do you reproduce the problem?
What I'm seeing is that ultimately in OpenShift Console 4.19 and 4.20 there are undefined CSS variables which cause Page and Breadcrumb paddings to be missing. Seems related to the changes in this PR.
Page.css:
.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));
/* The variable that's defined is --pf-v6-c-page__main-container--BorderWidth */
}
As seen in the screenshot below, several properties are undefined and the padding is calculated as 0 as a result:
--pf-v6-c-page__main-container--BorderInlineEndWidth
--pf-v6-c-page__main-container--BorderInlineStartWidth
--pf-v6-c-page__main-breadcrumb--PaddingInlineStart
--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd
Expected behavior
In the case of missing properties, the expressions should use a reasonable fallback so that paddings are always calculated. Alternatively, we should ensure the variables are always defined, but that could be harder to achieve.
What I mean is to have the expressions have a fallback
&.pf-m-padding#{$breakpoint-name} {
padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderInlineStartWidth, '0px'));
padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderInlineEndWidth, '0px'));
}
but maybe there's an underlying issue and it would be best to solve it from the root.
Is this issue blocking you?
No, I'll be providing values for the missing properties for my application to work correctly again. Note that 0 does not seem to work either.
const ocpPageRootStyles: React.CSSProperties = {
['--pf-v6-c-page__main-container--BorderInlineEndWidth' as string]: '0px',
['--pf-v6-c-page__main-container--BorderInlineStartWidth' as string]: '0px',
['--pf-v6-c-page__main-breadcrumb--PaddingInlineStart' as string]: '1rem',
['--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd' as string]: '1rem',
};
**Screenshots**
<img width="3902" height="991" alt="Image" src="https://github.com/user-attachments/assets/44093c01-ed85-45e2-afa5-1f0dbb52c69c" />
**What is your environment?**
- OS: Fedora 43
- Browser: latest Chrome
**What is your product and what release date are you targeting?**
Red Hat Edge Manager - but I've seen this affecting other pages in the OCP console unrelated to my application.
Jira Issue: PF-3639
Describe the problem
This is an issue with
Patternfly 5
Patternfly 6
other
Please give a clear and concise description of the problem. Which components are affected?
Several components are showing missing paddings due to CSS variables not being defined and paddings being calculated in
calcexpressions that reference them.Page
Breadcrumb
Possibly others that may use the same CSS variables
How do you reproduce the problem?
What I'm seeing is that ultimately in OpenShift Console 4.19 and 4.20 there are undefined CSS variables which cause Page and Breadcrumb paddings to be missing. Seems related to the changes in this PR.
Page.css:
As seen in the screenshot below, several properties are undefined and the padding is calculated as 0 as a result:
Expected behavior
In the case of missing properties, the expressions should use a reasonable fallback so that paddings are always calculated. Alternatively, we should ensure the variables are always defined, but that could be harder to achieve.
What I mean is to have the expressions have a fallback
but maybe there's an underlying issue and it would be best to solve it from the root.
Is this issue blocking you?
No, I'll be providing values for the missing properties for my application to work correctly again. Note that
0does not seem to work either.Jira Issue: PF-3639