Skip to content

ACM-33628-UI-text-overflow-in-AppSet-Review-step-hides-action-buttons-behind-YAML-pane #6112

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
openshift-merge-bot merged 1 commit into from
May 7, 2026
+140 −40
Merged

ACM-33628-UI-text-overflow-in-AppSet-Review-step-hides-action-buttons-behind-YAML-pane #6112

Show file tree
Hide file tree
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
96 changes: 86 additions & 10 deletions frontend/packages/react-form-wizard/src/review/ReviewStep.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,40 +120,114 @@
grid-column: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: auto;
row-gap: var(--pf-v6-c-description-list__group--RowGap);
align-items: baseline;
}

.wizard-review-pen-hover-zone--dl-group-row > .pf-v6-c-description-list__term {
grid-column: 1;
grid-row: 1;
}

.wizard-review-pen-hover-zone--dl-group-row > .pf-v6-c-description-list__description {
grid-column: 2;
grid-row: 1;
min-width: 0;
}

/* Stacked duplicate: full-width row under the term + value row (shown only in narrow groups via @container). */
.wizard-review-pen-hover-zone--dl-group-row > .wizard-review-pen-controls--dl-stacked {
grid-column: 1 / -1;
grid-row: 2;
display: none;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
width: 100%;
min-width: 0;
}

/* Wide: value + inline pen cluster in the dd; narrow: hide inline cluster and show stacked row. */
.pf-v6-c-description-list__group:has(> .wizard-review-pen-hover-zone--dl-group-row:not(.wizard-review-dl-empty-value)) {
container-type: inline-size;
container-name: wizard-review-pen-dl-group;
}

/* Empty string value: inline pen cluster can stay until a wider breakpoint (less dead space in the value cell). */
.pf-v6-c-description-list__group:has(> .wizard-review-pen-hover-zone--dl-group-row.wizard-review-dl-empty-value) {
container-type: inline-size;
container-name: wizard-review-pen-dl-group-empty;
}

@container wizard-review-pen-dl-group (max-width: 28rem) {
.wizard-review-pen-controls--dl-inline {
display: none !important;
}

.wizard-review-pen-hover-zone--dl-group-row > .wizard-review-pen-controls--dl-stacked {
display: flex !important;
justify-content: flex-start;
}
}

@container wizard-review-pen-dl-group-empty (max-width: 48rem) {
.wizard-review-pen-controls--dl-inline {
display: none !important;
}

.wizard-review-pen-hover-zone--dl-group-row > .wizard-review-pen-controls--dl-stacked {
display: flex !important;
justify-content: flex-start;
}
}

.wizard-review-inline-value {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--pf-t--global--spacer--xs, 0.25rem);
}

/* Description-list pen row: duplicate inline cluster (wide); must beat .wizard-review-inline-value alone. */
.wizard-review-inline-value.wizard-review-dl-pen-inline-row {
display: flex;
flex-wrap: wrap;
width: 100%;
min-width: 0;
justify-content: space-between;
align-items: baseline;
gap: var(--pf-t--global--spacer--xs, 0.25rem);
}

.wizard-review-inline-value.wizard-review-dl-pen-inline-row .wizard-review-dl-pen-value {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: var(--pf-t--global--spacer--xs, 0.25rem);
flex: 1 1 auto;
min-width: 0;
}

/* Value text grows so trailing controls (reveal / pen / YAML) stay on the right. */
.wizard-review-inline-value-body {
flex: 1 1 auto;
min-width: 0;
}

/* Full width of the value cell so pen controls can sit at the far right. */
.wizard-review-pen-hover-zone.wizard-review-inline-value,
.wizard-review-pen-hover-zone--dl-group-row .wizard-review-inline-value {
/* Full width of the value cell so pen controls sit at the far end on one line (space-between). */
.wizard-review-pen-hover-zone.wizard-review-inline-value {
display: flex;
flex-wrap: wrap;
width: 100%;
min-width: 0;
}

/* Match description-list term baseline; keep reveal + pen + arrow on one typographic line. */
.wizard-review-pen-hover-zone--dl-group-row .wizard-review-inline-value {
align-items: baseline;
justify-content: space-between;
}

.wizard-review-pen-controls {
display: inline-flex;
align-items: baseline;
flex-shrink: 0;
margin-left: auto;
gap: var(--pf-t--global--spacer--xs, 0.25rem);
}

Expand Down Expand Up @@ -202,7 +276,9 @@
.wizard-review-inline-value > .wizard-review-find-inline-body,
.wizard-review-inline-value > .wizard-review-find-value-with-trailing-icon,
.wizard-review-inline-value-body > .wizard-review-find-inline-body,
.wizard-review-inline-value-body > .wizard-review-find-value-with-trailing-icon {
.wizard-review-inline-value-body > .wizard-review-find-value-with-trailing-icon,
.wizard-review-dl-pen-value > .wizard-review-find-inline-body,
.wizard-review-dl-pen-value > .wizard-review-find-value-with-trailing-icon {
flex: 1 1 auto;
min-width: 0;
}
Expand Down
74 changes: 49 additions & 25 deletions frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { Button, DescriptionListDescription, DescriptionListTerm, useWizardConte
import { ArrowRightIcon, PenIcon } from '@patternfly/react-icons'
import get from 'get-value'
import {
cloneElement,
isValidElement,
type CSSProperties,
type KeyboardEvent as ReactKeyboardEvent,
type MouseEvent as ReactMouseEvent,
Expand Down Expand Up @@ -385,6 +387,7 @@ export function ReviewPenHoverZone({
const zoneClassName = [
'wizard-review-pen-hover-zone',
descriptionListTerm != null ? 'wizard-review-pen-hover-zone--dl-group-row' : 'wizard-review-inline-value',
descriptionListTerm != null && children === '' ? 'wizard-review-dl-empty-value' : null,
zoneClickable ? null : 'wizard-review-pen-hover-zone--controls-only',
]
.filter(Boolean)
Expand Down Expand Up @@ -412,42 +415,56 @@ export function ReviewPenHoverZone({
[onPenClick]
)

const editButtons = (
<>
<Button
type="button"
variant="plain"
className="wizard-review-edit-btn"
aria-label={ariaLabel}
onClick={(e) => {
e.stopPropagation()
const handler = onPenIconClick ?? onPenClick
handler(e)
}}
>
<PenIcon />
</Button>
{onArrowClick ? (
const renderEditButtons = useCallback(
() => (
<>
<Button
type="button"
variant="plain"
className="wizard-review-edit-btn"
aria-label={arrowAriaLabel}
aria-label={ariaLabel}
onClick={(e) => {
e.stopPropagation()
onArrowClick(e)
const handler = onPenIconClick ?? onPenClick
handler(e)
}}
>
<ArrowRightIcon />
<PenIcon />
</Button>
) : null}
</>
{onArrowClick ? (
<Button
type="button"
variant="plain"
className="wizard-review-edit-btn"
aria-label={arrowAriaLabel}
onClick={(e) => {
e.stopPropagation()
onArrowClick(e)
}}
>
<ArrowRightIcon />
</Button>
) : null}
</>
),
[ariaLabel, arrowAriaLabel, onArrowClick, onPenClick, onPenIconClick]
)

const [beforePenControlsInline, beforePenControlsStacked] = (() => {
if (beforePenControls == null) return [null, null] as const
if (isValidElement(beforePenControls)) {
return [
cloneElement(beforePenControls, { key: 'wizard-review-pen-bc-inline' }),
cloneElement(beforePenControls, { key: 'wizard-review-pen-bc-stacked' }),
] as const
}
return [beforePenControls, beforePenControls] as const
})()

const controls = (
<span className="wizard-review-pen-controls">
{beforePenControls}
{editButtons}
{renderEditButtons()}
</span>
)

Expand All @@ -462,11 +479,18 @@ export function ReviewPenHoverZone({
>
<DescriptionListTerm>{descriptionListTerm}</DescriptionListTerm>
<DescriptionListDescription id={descriptionListDescriptionId ?? ''} style={{ whiteSpace: 'pre-wrap' }}>
<span className="wizard-review-inline-value">
<span className="wizard-review-inline-value-body">{children}</span>
{controls}
<span className="wizard-review-inline-value wizard-review-dl-pen-inline-row">
<span className="wizard-review-dl-pen-value">{children}</span>
<span className="wizard-review-pen-controls wizard-review-pen-controls--dl-inline">
{beforePenControlsInline}
{renderEditButtons()}
</span>
</span>
</DescriptionListDescription>
<span className="wizard-review-pen-controls wizard-review-pen-controls--dl-stacked">
{beforePenControlsStacked}
{renderEditButtons()}
</span>
</div>
) : (
<Comp className={zoneClassName} style={style} onClick={zoneClickable ? onZoneClick : undefined}>
Expand Down
10 changes: 5 additions & 5 deletions frontend/packages/react-form-wizard/src/review/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,11 +125,11 @@ const REVIEW_HORIZONTAL_TERM_WIDTH_COMPACT: HorizontalTermWidthModifier = {
}

const REVIEW_HORIZONTAL_TERM_WIDTH_WIDE: HorizontalTermWidthModifier = {
default: '24ch',
sm: '30ch',
md: '40ch',
lg: '56ch',
xl: '60ch',
default: '12ch',
sm: '15ch',
md: '20ch',
lg: '28ch',
xl: '30ch',
'2xl': '70ch',
}
Comment on lines 127 to 134
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 6, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

# Find the file in question
find . -name "utils.ts" -path "*/react-form-wizard/src/review/*"

Repository: stolostron/console

Length of output: 120

🏁 Script executed:

# Once found, let's read the relevant sections
cat -n frontend/packages/react-form-wizard/src/review/utils.ts | head -150

Repository: stolostron/console

Length of output: 6880

🏁 Script executed:

# Search for both WIDE and COMPACT constants
rg "REVIEW_HORIZONTAL_TERM_WIDTH" frontend/packages/react-form-wizard/src/review/utils.ts -A 8

Repository: stolostron/console

Length of output: 809

🏁 Script executed:

# Also search for the selector function
rg "horizontalTermWidthModifierForInputRun" frontend/packages/react-form-wizard/src/review/utils.ts -B 2 -A 10

Repository: stolostron/console

Length of output: 523

COMPACT and WIDE constants are identical except at the 2xl breakpoint (35ch vs 70ch).

The selector horizontalTermWidthModifierForInputRun chooses between them based on maxLen < 64, but this distinction only affects term width at the 2xl breakpoint. For all smaller breakpoints (default through xl), both maps return identical values, making the label-length check ineffective below 2xl.

Confirm this matches the intended overflow fix; if the intent was to widen short labels at all sizes, the WIDE values at smaller breakpoints need adjustment. If the intent was a 2xl-only widening, consider whether the COMPACT/WIDE split and the 64-char threshold remain necessary.

🤖 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/packages/react-form-wizard/src/review/utils.ts` around lines 127 -
134, The COMPACT vs WIDE breakpoint maps (REVIEW_HORIZONTAL_TERM_WIDTH_COMPACT
and REVIEW_HORIZONTAL_TERM_WIDTH_WIDE) only differ at '2xl', so the selector
horizontalTermWidthModifierForInputRun (which switches by maxLen < 64) is
ineffective below 2xl; either expand the WIDE values for smaller breakpoints
(default, sm, md, lg, xl) to the intended wider ch sizes so short labels get
more room at all sizes, or simplify the logic by keeping both maps identical and
only apply a '2xl-only' widening in horizontalTermWidthModifierForInputRun (or
remove the maxLen threshold). Update the relevant constant(s) and/or the
horizontalTermWidthModifierForInputRun function accordingly to reflect the
intended behavior.


Expand Down
Loading