Skip to content

[ACM-29812] ApplicationSet creation - Git revision menu extends page height #5671

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

Merged
Ginxo merged 2 commits into from
Feb 17, 2026
Merged

[ACM-29812] ApplicationSet creation - Git revision menu extends page height #5671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b056031
isScrollable added to every PfSelect from react-form-wizards components
Ginxo Feb 10, 2026
bbed566
ControlPanelComboBox.js adapted
Ginxo Feb 10, 2026
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
1 change: 1 addition & 0 deletions frontend/packages/react-form-wizard/src/inputs/WizAsyncSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export function WizAsyncSelect(props: WizAsyncSelectProps) {
selected={value}
onSelect={(_event, value) => onSelect(value?.toString() ?? '')}
shouldFocusFirstItemOnOpen={false}
isScrollable
>
<SelectListOptions
allOptions={options}
Expand Down
1 change: 1 addition & 0 deletions frontend/packages/react-form-wizard/src/inputs/WizMultiSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export function WizMultiSelect(props: WizMultiSelectProps) {
)}
selected={value}
onSelect={(_event, value) => onSelect(value?.toString() ?? '')}
isScrollable
>
<SelectListOptions
value={value}
Expand Down
1 change: 1 addition & 0 deletions frontend/packages/react-form-wizard/src/inputs/WizSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@ function WizSelectBase<T = any>(props: SelectProps<T>) {
popperProps={{ appendTo: 'inline' }}
selected={value}
onSelect={(_event, value) => onSelect(value?.toString() ?? '')}
isScrollable
>
<SelectListOptions
value={value}
Expand Down
1 change: 1 addition & 0 deletions frontend/packages/react-form-wizard/src/inputs/WizSingleSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ export function WizSingleSelect(props: WizSingleSelectProps) {
)}
selected={value}
onSelect={(_event, value) => onSelect(value?.toString() ?? '')}
isScrollable
>
<SelectListOptions
value={value}
Expand Down
52 changes: 29 additions & 23 deletions frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ class ControlPanelComboBox extends React.Component {
'tf--list-box__menu-icon': true,
'tf--list-box__menu-icon--open': isOpen,
})
const toggleStyles = { height: isOpen ? '10%' : '100%' }
Copy link
Contributor Author

@Ginxo Ginxo Feb 10, 2026

Choose a reason for hiding this comment

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

this is for the open/close arrow, it is not ideal solution but it feels like this screen has not been well maintained

Image

Copy link

@coderabbitai coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, locate and read the file
find . -type f -name "ControlPanelComboBox.js" | head -5

Repository: stolostron/console

Length of output: 135

🏁 Script executed:

# Check the actual file structure around line 171
if [ -f "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js" ]; then
  wc -l "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"
fi

Repository: stolostron/console

Length of output: 137

🏁 Script executed:

# Search for related CSS files
fd -e css -e scss "ControlPanelComboBox|ComboBox" frontend/

Repository: stolostron/console

Length of output: 44

🏁 Script executed:

# Read the file around line 171 to understand the toggleStyles context
sed -n '160,190p' "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"

Repository: stolostron/console

Length of output: 1357

🏁 Script executed:

# Also read around line 278 where toggleStyles is applied
sed -n '270,290p' "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"

Repository: stolostron/console

Length of output: 950

🏁 Script executed:

# Read the component structure (likely JSX return statement)
sed -n '1,50p' "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"

Repository: stolostron/console

Length of output: 1954

🏁 Script executed:

# Search for CSS files that contain styles for these classes
rg -n "creation-view-controls-combobox|tf--list-box" --type css --type scss -B 2 -A 5 frontend/

Repository: stolostron/console

Length of output: 90

🏁 Script executed:

# Also check if there are SCSS files in the same directory
fd -e scss -e css frontend/src/components/TemplateEditor/controls/

Repository: stolostron/console

Length of output: 559

🏁 Script executed:

# Read more of the JSX structure to see the full component layout, especially the menu part
sed -n '190,320p' "frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js"

Repository: stolostron/console

Length of output: 6105

🏁 Script executed:

# Search for CSS files in the project that might define tf--list-box styles
rg -t css "tf--list-box" --max-count 5 -B 2 -A 5 frontend/

Repository: stolostron/console

Length of output: 2549

🏁 Script executed:

# Also search for any inline style definitions or CSS files that might be imported
fd . 'frontend/src/components/TemplateEditor/controls/' --type f

Repository: stolostron/console

Length of output: 3474

🏁 Script executed:

# Check if there's a styles file in the same directory or parent
fd -e css -e scss . 'frontend/src/components/TemplateEditor/' | head -20

Repository: stolostron/console

Length of output: 442

🏁 Script executed:

# Read the control-panel.css file to understand the styling context
cat -n "frontend/src/components/TemplateEditor/css/control-panel.css"

Repository: stolostron/console

Length of output: 37252

Percentage-based height on toggle button may cause unexpected layout behavior.

The height: isOpen ? '10%' : '100%' relies on the parent container (.tf--list-box) having an explicitly defined height. Since the parent has position: relative but no explicit height property, percentage calculations may not work as intended. Additionally, this pattern introduces unnecessary state-dependent styling that conflicts with the existing CSS rule height: 100% on .tf--list-box__menu-icon.

Consider removing the inline height style and relying on CSS:

🔧 Suggested fix 
-    const toggleStyles = { height: isOpen ? '10%' : '100%' }
+    const toggleStyles = {}

Or simply omit the style attribute since CSS already handles this correctly.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const toggleStyles = { height: isOpen ? '10%' : '100%' }
const toggleStyles = {}
🤖 Prompt for AI Agents 
In `@frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js` at
line 171, The inline percentage-based toggleStyles ({ height: isOpen ? '10%' :
'100%' }) on the toggle button can cause layout issues because parent height
isn't explicitly set and it conflicts with the existing CSS rule
.tf--list-box__menu-icon; remove the toggleStyles usage (and any application of
it) from the component so the element relies on the stylesheet's height: 100%
behavior, or replace it with a static, CSS-class-driven style if different
styling is needed; update references to toggleStyles and any conditional
application based on isOpen to use CSS classes instead.

const inputClasses = classNames({
'pf-v6-c-form-control': true,
input: true,
Expand Down Expand Up @@ -274,6 +275,7 @@ class ControlPanelComboBox extends React.Component {
ref={this.setToggleRef}
onClick={this.clickToggle.bind(this)}
onKeyPress={this.pressToggle.bind(this)}
style={toggleStyles}
>
<svg
fillRule="evenodd"
Expand All @@ -292,39 +294,43 @@ class ControlPanelComboBox extends React.Component {
</div>
{!disabled && isOpen && (
<div
Copy link
Contributor Author

@Ginxo Ginxo Feb 10, 2026

Choose a reason for hiding this comment

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

the rest is just wrapping the whole thing according to the new PF6 HTML structure

role="button"
className="tf--list-box__menu"
className="pf-v6-c-menu pf-m-scrollable"
key={key}
id={key}
ref={this.setMenuRef}
role="presentation"
onMouseDown={() => {
this.menuClick = true
}}
onMouseUp={() => {
this.menuClick = false
}}
tabIndex="0"
>
{items.map(({ label, id }) => {
const itemClasses = classNames({
'tf--list-box__menu-item': true,
searching: searchText,
})
return (
<div
role="button"
key={label}
className={itemClasses}
id={`${controlId}-item-${id}`}
tabIndex="0"
onMouseDown={() => this.setState({ preselect: true })}
onClick={this.clickSelect.bind(this, label)}
onKeyPress={this.pressSelect.bind(this, label)}
>
{this.renderLabel(label, searchText, active, control, simplified, describe)}
</div>
)
})}
<div className="pf-v6-c-menu__content">
<ul role="listbox" aria-multiselectable="false" className="pf-v6-c-menu__list">
{items.map(({ label, id }) => (
<li key={label} className="pf-v6-c-menu__list-item" role="none">
<button
id={`${controlId}-item-${id}`}
type="button"
tabIndex={id === 0 ? 0 : -1}
className="pf-v6-c-menu__item"
role="option"
aria-selected={label === active}
onMouseDown={() => this.setState({ preselect: true })}
onClick={this.clickSelect.bind(this, label)}
onKeyPress={this.pressSelect.bind(this, label)}
>
<span className="pf-v6-c-menu__item-main">
<span className="pf-v6-c-menu__item-text">
{this.renderLabel(label, searchText, active, control, simplified, describe)}
</span>
</span>
</button>
</li>
))}
</ul>
</div>
</div>
)}
</div>
Expand Down