Skip to content

ACM-33135 Fix Create Cluster wizard has no margin #6102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oksanabaza wants to merge 1 commit into
base: main
Choose a base branch
from
Open

ACM-33135 Fix Create Cluster wizard has no margin #6102

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/components/TemplateEditor/css/control-panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
display: flex;
flex-direction: column;
row-gap: 0;
padding: var(--pf-v5-global--spacer--lg);
padding: var(--pf-t--global--spacer--lg);
}
.temptifly .showWizard .creation-view-controls,
.creation-view .creation-view-controls {
padding: var(--pf-v5-c-wizard__main-body--PaddingTop) var(--pf-v5-c-wizard__main-body--PaddingRight)
var(--pf-v5-c-wizard__main-body--PaddingBottom) var(--pf-v5-c-wizard__main-body--PaddingLeft);
padding: var(--pf-v6-c-wizard__main-body--PaddingBlockStart) var(--pf-v6-c-wizard__main-body--PaddingInlineEnd)
var(--pf-v6-c-wizard__main-body--PaddingBlockEnd) var(--pf-v6-c-wizard__main-body--PaddingInlineStart);
Comment on lines +27 to +32
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find the installed `@patternfly/patternfly` version
fd package.json --max-depth 3 | xargs grep -l '"@patternfly/patternfly"' 2>/dev/null | head -5

# Look for the wizard CSS in node_modules to confirm variable names
fd "wizard.css" --search-path node_modules/@patternfly 2>/dev/null | head -5 | xargs grep -l "main-body" 2>/dev/null

# Check that the four PaddingBlock/Inline vars exist
fd "wizard.css" --search-path node_modules/@patternfly 2>/dev/null | head -5 | xargs grep "wizard__main-body--Padding" 2>/dev/null

# Check design token spacer--lg
fd "patternfly-tokens.css" --search-path node_modules/@patternfly 2>/dev/null | head -3 | xargs grep "spacer--lg" 2>/dev/null

Repository: stolostron/console

Length of output: 86

🏁 Script executed:

#!/bin/bash
# Check the `@patternfly/patternfly` version in frontend/package.json
echo "=== Checking PatternFly version ==="
cat frontend/package.json | grep -A 2 -B 2 '@patternfly/patternfly'

# Check if there's a patternfly CSS import or any CSS bundling
echo -e "\n=== Checking for CSS imports in the codebase ==="
rg -l "patternfly" frontend/src --type ts --type tsx --type js | head -10

# Look for references to the specific variables in the codebase
echo -e "\n=== Checking for wizard padding variable usage ==="
rg "PaddingBlock|PaddingInline|spacer--lg" frontend/src --type css

# Check the control-panel.css file to see its full structure
echo -e "\n=== Checking control-panel.css content around the modified lines ==="
wc -l frontend/src/components/TemplateEditor/css/control-panel.css

Repository: stolostron/console

Length of output: 1220

🏁 Script executed:

#!/bin/bash
# Check what CSS files are imported in the app or component
echo "=== Check for CSS imports in TemplateEditor component ==="
find frontend/src/components/TemplateEditor -name "*.ts*" -o -name "*.js*" | xargs grep -l "import.*\.css" 2>/dev/null

# Look at the TemplateEditor component structure
echo -e "\n=== TemplateEditor directory structure ==="
find frontend/src/components/TemplateEditor -type f | head -20

# Check if control-panel.css imports patternfly CSS or has any `@import` statements
echo -e "\n=== Check control-panel.css for imports ==="
head -50 frontend/src/components/TemplateEditor/css/control-panel.css

# Check where control-panel.css is imported from
echo -e "\n=== Check where control-panel.css is used ==="
rg "control-panel\.css" frontend/src

Repository: stolostron/console

Length of output: 3522

🌐 Web query:

PatternFly 6.4.0 CSS variables --pf-v6-c-wizard__main-body--Padding

💡 Result:

In PatternFly 6, the wizard main body padding is controlled by these CSS custom properties (splitting padding into block/inline sides): 1) --pf-v6-c-wizardmain-body--PaddingBlockStart 2) --pf-v6-c-wizardmain-body--PaddingInlineEnd 3) --pf-v6-c-wizardmain-body--PaddingBlockEnd 4) --pf-v6-c-wizardmain-body--PaddingInlineStart These are documented for the Wizard component as the variables that define the main container body padding [1][2]. If you are specifically looking for a single variable named --pf-v6-c-wizardmain-body--Padding (exact name), the official Wizard CSS variables documentation does not list such a single “--Padding” variable for main-body; instead it provides the four side-specific variables above [1][2]. Additionally, PatternFly provides a modifier to remove the padding entirely:.pf-m-no-padding on.pf-v6-c-wizardmain-body [2].

Citations:

🌐 Web query:

PatternFly 6.4.0 CSS design token --pf-t--global--spacer--lg

💡 Result:

The PatternFly 6.4.0 CSS design token --pf-t--global--spacer--lg has the value 1.5rem (24px).[1][2]

Citations:

Correct the CSS variable names for wizard padding.

The wizard main-body padding variables in lines 31–32 are incorrectly named. PatternFly 6.4.0 defines them as --pf-v6-c-wizardmain-body--PaddingBlockStart/InlineEnd/BlockEnd/InlineStart (no underscores between wizard and main-body), but the code uses --pf-v6-c-wizard__main-body--Padding* (with __). Undefined CSS variables resolve to initial, causing padding: 0 0 0 0 at runtime—the padding fix has no effect.

The design token --pf-t--global--spacer--lg on line 27 is correct (1.5rem/24px).

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/TemplateEditor/css/control-panel.css` around lines 27
- 32, The wizard padding variables used in the .temptifly .showWizard
.creation-view-controls and .creation-view .creation-view-controls rules are
misspelled (using --pf-v6-c-wizard__main-body--Padding*); replace them with the
correct PatternFly 6.4.0 token names without the extra underscores:
--pf-v6-c-wizardmain-body--PaddingBlockStart,
--pf-v6-c-wizardmain-body--PaddingInlineEnd,
--pf-v6-c-wizardmain-body--PaddingBlockEnd, and
--pf-v6-c-wizardmain-body--PaddingInlineStart so the padding values resolve
correctly at runtime.

}
.temptifly .creation-view-controls div:focus,
.creation-view .creation-view-controls div:focus {
Expand Down