fix: Layout issues when resizing Cloud Config parameter dialog

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Issue

Layout issues when resizing Cloud Config parameter dialog

Summary by CodeRabbit

• New Features

  • MultiSelect dropdowns now support custom width configuration.
  • Parameter editor now features an Options menu with Word wrap and Diff view toggles.

• Style

  • Updated styling for improved layout and content handling in editor components.

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR modifies styling and component logic across four files. JsonEditor and ConfigConflictDiff stylesheets are updated to adjust overflow, width constraints, and height calculations. MultiSelect component gains a new menuWidth prop for customizable dropdown width. ConfigDialog component introduces a new Options menu UI with Popover positioning logic.

Changes

Cohort / File(s)	Summary
JSON Editor Styling src/components/JsonEditor/JsonEditor.scss	Overflow handling changed from auto to hidden; min-width of editable input layer updated to dynamic calculation using modal sizing variables.
MultiSelect Component src/components/MultiSelect/MultiSelect.react.js	Added optional menuWidth prop to allow explicit control of dropdown menu width, with fallback to clientWidth.
Config Styling src/dashboard/Data/Config/ConfigConflictDiff.scss	Container gains inline-size containment; min-width relaxed from 100% to 0; fixed height reduced from 200px to 80px; resize constraint changed from both directions to vertical only.
Config Dialog UI src/dashboard/Data/Config/ConfigDialog.react.js	Replaces per-parameter Toggle/Label pair with Options button that opens Popover menu (Word wrap, Diff view); adds updateOptionsMenuPos method for dynamic Popover positioning; extends state with optionsMenuOpen flag and position tracking.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix: Non-printable character box missing when editing Cloud Config parameter #3218: Modifies the same ConfigDialog.react.js file, introducing UI enhancements to the configuration dialog component.
• feat: Add option to block saving Cloud Config parameter if validation fails #3225: Updates MultiSelect.react.js component with additional prop-driven behavior for enhanced dropdown control.
• feat: Allow freeform text view resizing in modal dialogs #2910: Introduces modal sizing CSS variables (\--modal-min-width\\ and \--modal-label-ratio\\) used in the JsonEditor styling updates.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete; it only provides the Issue section while omitting the required Approach section and Tasks checklist from the template.	Add the Approach section describing the changes made (e.g., CSS adjustments, menu additions) and complete the Tasks checklist to match the template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main fix—layout issues when resizing the Cloud Config parameter dialog—matching the actual changes to dialog styling and component sizing.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/components/MultiSelect/MultiSelect.react.js (1)

84-84: Add menuWidth to PropTypes.

The new menuWidth prop is used but not documented in the PropTypes definition at the end of the file. This affects API discoverability and type validation.

📝 Proposed fix

Add the following to the PropTypes block after line 190:

menuWidth: PropTypes.number.describe('Explicit width of the dropdown menu in pixels. Defaults to the trigger element width.'),

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/MultiSelect/MultiSelect.react.js` at line 84, The component
uses the menuWidth prop (see assignment to const width in MultiSelect.render
where this.props.menuWidth is read) but it is missing from the component's
PropTypes; add menuWidth to the PropTypes object for the MultiSelect component
(the PropTypes block at the end of the file) as a number with a short
description (e.g., "Explicit width of the dropdown menu in pixels. Defaults to
the trigger element width.") so it is validated and documented.

src/dashboard/Data/Config/ConfigDialog.react.js (1)

343-349: Remove or use the updateOptionsMenuPos method.

This method is defined but never called. The position calculation is duplicated inline in the onClick handler at lines 592-595.

♻️ Option 1: Remove unused method

-  updateOptionsMenuPos = () => {
-    if (this.optionsRef.current) {
-      const pos = Position.inWindow(this.optionsRef.current);
-      pos.y -= 4;
-      this.setState({ optionsMenuPos: pos });
-    }
-  };
-

♻️ Option 2: Use the method in onClick

                <Button
                  value="Options &#9662;"
                  onClick={() => {
-                    const node = this.optionsRef.current;
-                    const pos = Position.inWindow(node);
-                    pos.y -= 4; // small gap above button
-                    this.setState({ optionsMenuOpen: !this.state.optionsMenuOpen, optionsMenuPos: pos });
+                    this.updateOptionsMenuPos();
+                    this.setState({ optionsMenuOpen: !this.state.optionsMenuOpen });
                  }}
                />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/dashboard/Data/Config/ConfigDialog.react.js` around lines 343 - 349, The
updateOptionsMenuPos method is duplicated by inline position calculation in the
options onClick handler—replace the inline Position.inWindow(...) logic with a
call to this.updateOptionsMenuPos() (the method is already an arrow and uses
this.optionsRef and setState) so the position calculation is centralized; ensure
the onClick handler no longer mutates pos directly and simply invokes
updateOptionsMenuPos, or if you prefer removal, delete updateOptionsMenuPos and
the unused optionsMenuPos state so no dead code remains.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/JsonEditor/JsonEditor.scss`:
- Line 93: The min-width calc in JsonEditor.scss uses CSS variables that may be
undefined; update the rule in JsonEditor.scss to supply fallbacks like
Field.scss does so the expression becomes calc(var(--modal-min-width, 540px) *
(1 - var(--modal-label-ratio, 0.5))) to prevent layout collapse when
--modal-min-width or --modal-label-ratio (set in Modal.scss and Field.react.js)
are missing.

---

Nitpick comments:
In `@src/components/MultiSelect/MultiSelect.react.js`:
- Line 84: The component uses the menuWidth prop (see assignment to const width
in MultiSelect.render where this.props.menuWidth is read) but it is missing from
the component's PropTypes; add menuWidth to the PropTypes object for the
MultiSelect component (the PropTypes block at the end of the file) as a number
with a short description (e.g., "Explicit width of the dropdown menu in pixels.
Defaults to the trigger element width.") so it is validated and documented.

In `@src/dashboard/Data/Config/ConfigDialog.react.js`:
- Around line 343-349: The updateOptionsMenuPos method is duplicated by inline
position calculation in the options onClick handler—replace the inline
Position.inWindow(...) logic with a call to this.updateOptionsMenuPos() (the
method is already an arrow and uses this.optionsRef and setState) so the
position calculation is centralized; ensure the onClick handler no longer
mutates pos directly and simply invokes updateOptionsMenuPos, or if you prefer
removal, delete updateOptionsMenuPos and the unused optionsMenuPos state so no
dead code remains.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b596a32 and 14bbb92.

📒 Files selected for processing (4)

• src/components/JsonEditor/JsonEditor.scss
• src/components/MultiSelect/MultiSelect.react.js
• src/dashboard/Data/Config/ConfigConflictDiff.scss
• src/dashboard/Data/Config/ConfigDialog.react.js

[parseplatformorg]

🎉 This change has been released in version 9.1.0-alpha.2