[release-2.17] ACM-33628-UI-text-overflow-in-AppSet-Review-step-hides-action-buttons-behind-YAML-pane

frontend/packages/react-form-wizard/src/review/ReviewStep.css

@@ -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);
 }
 
@@ -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;
 }

frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx

@@ -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,
@@ -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)
@@ -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>
   )
 
@@ -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}>

frontend/packages/react-form-wizard/src/review/utils.ts

@@ -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',
 }