Skip to content

OCPBUGS-65812: Layout issue on YAML editor settings popup window #15753

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

Closed
XiyunZhao wants to merge 1 commit into from
Closed

OCPBUGS-65812: Layout issue on YAML editor settings popup window #15753

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
8 changes: 6 additions & 2 deletions frontend/public/components/modals/edit-yaml-settings-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,11 @@ const ConfigModalItem: React.FCC<ConfigModalItemProps> = ({
return (
<Split hasGutter>
<SplitItem isFilled>
<Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsMd' }}>
<Flex
alignItems={{ default: 'alignItemsCenter' }}
spaceItems={{ default: 'spaceItemsMd' }}
style={{ flexWrap: 'nowrap' }}
>
Comment on lines +71 to +75
Copy link

@coderabbitai coderabbitai bot Nov 21, 2025

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

Verify responsive behavior on narrow viewports.

The flexWrap: 'nowrap' inline style fixes the reported layout issue by preventing the icon and text from wrapping. However, on narrow viewports or small screens, this could cause horizontal overflow if the description text is lengthy.

Please test the modal on various screen sizes (mobile, tablet) to ensure the content doesn't overflow or cause horizontal scrolling. Consider whether the modal needs a minimum width or if text truncation with ellipsis would be a better fallback for very narrow screens.

🏁 Script executed:

#!/bin/bash
# Verify if PatternFly's Modal component with variant="small" has responsive handling

# Search for Modal usage patterns and responsive utilities in the codebase
rg -nP --type=tsx --type=ts -C3 'Modal.*variant.*small|pf-v6-u-text-truncate|pf-v6-u-text-nowrap' -g '!node_modules' -g '!dist'

Length of output: 27

🏁 Script executed:

#!/bin/bash
# Correct search using glob patterns for tsx/ts files
# 1. Examine the actual file being modified
echo "=== Examining the modified file ==="
cat "frontend/public/components/modals/edit-yaml-settings-modal.tsx" | head -120 | tail -60

echo -e "\n=== Searching for Modal variant patterns ==="
rg -nP -g '*.tsx' -g '*.ts' 'Modal.*variant' -C2 | head -50

echo -e "\n=== Searching for flexWrap or nowrap patterns ==="
rg -nP -g '*.tsx' -g '*.ts' 'flexWrap|nowrap' -C2 | head -50

Length of output: 9266

🏁 Script executed:

#!/bin/bash
# Check PatternFly documentation for responsive Modal behavior
# This queries external resources about PatternFly Modal component
echo "Checking PatternFly Modal responsive behavior patterns..."
curl -s "https://www.patternfly.org/components/modal" 2>/dev/null | grep -i "responsive\|small\|width" | head -20 || echo "Could not fetch external documentation"

Length of output: 57

🌐 Web query:

PatternFly Modal variant small responsive width behavior

💡 Result:

Short answer: PatternFly's "small" modal is implemented as a responsive max-width, not a fixed pixel width. By default the modal box width is calc(100% - spacer) and each variant sets a max‑width; the small variant's max‑width is 35rem (so it will shrink on narrow viewports and center until it reaches that max). You can override with the Modal's width prop or by changing the --pf-c-modal-box--m-sm--sm--MaxWidth (or the general --pf-c-modal-box--MaxWidth) CSS variable. [1][2]

Sources:

  • PatternFly Modal docs and CSS variables (shows default width and --pf-c-modal-box--m-sm--sm--MaxWidth = 35rem). [1]
  • PatternFly Elements / Modal (notes variant controls width and lists same CSS custom properties). [2]

🌐 Web query:

PatternFly Flex component flexWrap responsive design

💡 Result:

Short answer — PatternFly supports responsive flex wrapping both in CSS classes and in the React Flex API.

  • CSS / utility approach: use the Flex layout classes and breakpoint modifiers (e.g. .pf-l-flex with modifier classes like .pf-m-column-on-lg, and related responsive modifiers) to control direction/wrapping at breakpoints. See the layout docs for examples and available breakpoint modifiers. [1]

  • React component approach: the Flex component exposes a flexWrap prop you can set responsively with breakpoint keys (default, sm, md, lg, xl, 2xl). Allowed values: 'wrap', 'wrapReverse', 'nowrap'. Example:
    <Flex flexWrap={{ default: 'wrap', lg: 'nowrap' }}>...
    This will apply wrap by default and switch to nowrap at the lg breakpoint. [2]

Sources:
[1] PatternFly Flex layout documentation (classes / responsive modifiers).
[2] PatternFly Flex component props (flexWrap API).

🌐 Web query:

PatternFly Split layout component narrow viewport handling

💡 Result:

Short answer — Split doesn't automatically stack at narrow widths; use wrapping or a different layout.

  • PatternFly Split lays items horizontally and will shrink items unless you enable wrapping. Use the pf-m-wrap / isWrappable option on Split to allow items to wrap to new lines on narrow viewports. [1][2]
  • Mark the item that should take remaining space with .pf-m-fill / isFilled so layout behaves predictably when space is constrained. [2]
  • If you want a true stacked (vertical) behavior on small screens, use a layout/component that switches orientation (for example Sidebar uses a stack orientation on small screens by default), or switch between Split and Stack responsively in your markup/CSS. [3]
    References
  1. PatternFly — Split (design guidelines). [1]
  2. PatternFly — Split (HTML / React props). [2]
  3. PatternFly — Sidebar (orientation: stack on small screens). [3]

Use PatternFly's responsive flexWrap API instead of inline style.

The flexWrap: 'nowrap' inline style prevents responsive behavior. PatternFly Flex component supports responsive flexWrap through breakpoint keys (e.g., flexWrap={{ default: 'wrap', lg: 'nowrap' }}), which would allow text to wrap on small screens and prevent wrapping only on larger viewports.

Change:

style={{ flexWrap: 'nowrap' }}

To:

flexWrap={{ default: 'wrap', lg: 'nowrap' }}

This ensures the modal content adapts properly on mobile devices while maintaining the horizontal layout on desktop screens.

🤖 Prompt for AI Agents 
In frontend/public/components/modals/edit-yaml-settings-modal.tsx around lines
71 to 75, replace the inline style that forces non-wrapping with PatternFly's
responsive flexWrap prop so the layout can wrap on small screens and only stay
nowrap on large viewports; remove style={{ flexWrap: 'nowrap' }} and add
flexWrap={{ default: 'wrap', lg: 'nowrap' }} to the Flex component so text wraps
on mobile but remains horizontal on desktop.

<FlexItem>
<Icon />
</FlexItem>
Expand All @@ -78,7 +82,7 @@ const ConfigModalItem: React.FCC<ConfigModalItemProps> = ({
</FlexItem>
</Flex>
</SplitItem>
<SplitItem>
<SplitItem style={{ whiteSpace: 'nowrap' }}>
<Switch
id={title}
isReversed
Expand Down