From 1dd2e97942385bca80a647cad0d591e30616c11a Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 27 Feb 2026 14:29:25 +0000
Subject: [PATCH 1/4] fix

---
 src/components/JsonEditor/JsonEditor.scss         | 2 +-
 src/dashboard/Data/Config/ConfigConflictDiff.scss | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/JsonEditor/JsonEditor.scss b/src/components/JsonEditor/JsonEditor.scss
index cab49ea0df..e0d35af85a 100644
--- a/src/components/JsonEditor/JsonEditor.scss
+++ b/src/components/JsonEditor/JsonEditor.scss
@@ -90,7 +90,7 @@
 .inputLayer {
   display: block;
   width: 100%;
-  min-width: 100%;
+  min-width: calc(var(--modal-min-width) * (1 - var(--modal-label-ratio)));
   background: transparent;
   color: transparent;
   caret-color: #333;
diff --git a/src/dashboard/Data/Config/ConfigConflictDiff.scss b/src/dashboard/Data/Config/ConfigConflictDiff.scss
index a3fa52cd2b..f0307c2320 100644
--- a/src/dashboard/Data/Config/ConfigConflictDiff.scss
+++ b/src/dashboard/Data/Config/ConfigConflictDiff.scss
@@ -6,12 +6,12 @@
  * the root directory of this source tree.
  */
 .container {
+  contain: inline-size;
   width: 100%;
-  min-width: 100%;
+  min-width: 0;
   overflow: auto;
   height: 200px;
   min-height: 80px;
-  resize: both;
   text-align: left;
 }
 

From 761700e4172d7a590c3afd06e67f8f6c20df3b72 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 27 Feb 2026 17:40:52 +0000
Subject: [PATCH 2/4] fix

---
 src/components/JsonEditor/JsonEditor.scss     | 10 ++-
 .../MultiSelect/MultiSelect.react.js          |  2 +-
 .../Data/Config/ConfigConflictDiff.scss       |  3 +-
 .../Data/Config/ConfigDialog.react.js         | 80 +++++++++++++------
 4 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/src/components/JsonEditor/JsonEditor.scss b/src/components/JsonEditor/JsonEditor.scss
index e0d35af85a..35167e4e79 100644
--- a/src/components/JsonEditor/JsonEditor.scss
+++ b/src/components/JsonEditor/JsonEditor.scss
@@ -11,6 +11,11 @@
   position: relative;
   display: inline-block;
   width: 100%;
+  min-width: calc(var(--modal-min-width) * (1 - var(--modal-label-ratio)));
+  height: 200px;
+  min-height: 80px;
+  resize: both;
+  overflow: hidden;
   font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   font-size: 15px;
   line-height: 1.5;
@@ -90,14 +95,11 @@
 .inputLayer {
   display: block;
   width: 100%;
-  min-width: calc(var(--modal-min-width) * (1 - var(--modal-label-ratio)));
+  height: 100%;
   background: transparent;
   color: transparent;
   caret-color: #333;
-  resize: both;
   outline: none;
-  min-height: 80px;
-  height: 200px;
   overflow: auto;
 
   &::placeholder {
diff --git a/src/components/MultiSelect/MultiSelect.react.js b/src/components/MultiSelect/MultiSelect.react.js
index 532b853fd9..f742c6c6d2 100644
--- a/src/components/MultiSelect/MultiSelect.react.js
+++ b/src/components/MultiSelect/MultiSelect.react.js
@@ -81,7 +81,7 @@ export default class MultiSelect extends React.Component {
   render() {
     let popover = null;
     if (this.state.open) {
-      const width = this.dropdownRef.current.clientWidth;
+      const width = this.props.menuWidth || this.dropdownRef.current.clientWidth;
 
       const classes = [styles.menu];
       if (this.props.dense) {
diff --git a/src/dashboard/Data/Config/ConfigConflictDiff.scss b/src/dashboard/Data/Config/ConfigConflictDiff.scss
index f0307c2320..55c9259518 100644
--- a/src/dashboard/Data/Config/ConfigConflictDiff.scss
+++ b/src/dashboard/Data/Config/ConfigConflictDiff.scss
@@ -10,8 +10,9 @@
   width: 100%;
   min-width: 0;
   overflow: auto;
-  height: 200px;
+  height: 80px;
   min-height: 80px;
+  resize: vertical;
   text-align: left;
 }
 
diff --git a/src/dashboard/Data/Config/ConfigDialog.react.js b/src/dashboard/Data/Config/ConfigDialog.react.js
index 03c5327f09..b1511daee2 100644
--- a/src/dashboard/Data/Config/ConfigDialog.react.js
+++ b/src/dashboard/Data/Config/ConfigDialog.react.js
@@ -10,6 +10,7 @@ import Dropdown from 'components/Dropdown/Dropdown.react';
 import Field from 'components/Field/Field.react';
 import FileInput from 'components/FileInput/FileInput.react';
 import GeoPointInput from 'components/GeoPointInput/GeoPointInput.react';
+import Icon from 'components/Icon/Icon.react';
 import Label from 'components/Label/Label.react';
 import Modal from 'components/Modal/Modal.react';
 import NonPrintableHighlighter, { hasNonPrintableChars, getNonPrintableCharsFromJson, hasNonAlphanumericChars, getNonAlphanumericCharsFromJson, getRegexValidation, getRegexValidationFromJson } from 'components/NonPrintableHighlighter/NonPrintableHighlighter.react';
@@ -18,6 +19,8 @@ import Parse from 'parse';
 import React from 'react';
 import TextInput from 'components/TextInput/TextInput.react';
 import Toggle from 'components/Toggle/Toggle.react';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
 import Button from 'components/Button/Button.react';
 import JsonEditor from 'components/JsonEditor/JsonEditor.react';
 import validateNumeric from 'lib/validateNumeric';
@@ -120,6 +123,7 @@ export default class ConfigDialog extends React.Component {
 
   constructor(props) {
     super();
+    this.optionsRef = React.createRef();
     this.state = {
       value: null,
       type: 'String',
@@ -129,6 +133,7 @@ export default class ConfigDialog extends React.Component {
       wordWrap: false,
       showDiff: false,
       confirmOverride: false,
+      optionsMenuOpen: false,
       error: null,
       syntaxColors: null,
     };
@@ -335,6 +340,14 @@ export default class ConfigDialog extends React.Component {
     });
   }
 
+  updateOptionsMenuPos = () => {
+    if (this.optionsRef.current) {
+      const pos = Position.inWindow(this.optionsRef.current);
+      pos.y -= 4;
+      this.setState({ optionsMenuPos: pos });
+    }
+  };
+
   formatValue() {
     const { value, error } = ConfigDialog.formatJSON(this.state.value);
     this.setState({ value, error });
@@ -566,37 +579,58 @@ export default class ConfigDialog extends React.Component {
                   onClick={this.compactValue.bind(this)}
                   disabled={!this.canFormatValue()}
                 />
-                <label style={{ display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer' }}>
-                  <Toggle
-                    type={Toggle.Types.HIDE_LABELS}
-                    value={this.state.wordWrap}
-                    onChange={wordWrap => this.setState({ wordWrap })}
-                    additionalStyles={{ margin: '0px' }}
-                    colorLeft="#cbcbcb"
-                    colorRight="#00db7c"
-                  />
-                  <span style={{ color: this.state.wordWrap ? '#333' : '#999' }}>Wrap</span>
-                </label>
                 {this.state.error && (
                   <span style={{ color: '#d73a49', fontSize: '13px' }}>{this.state.error}</span>
                 )}
               </>
             )}
-            {isDiffableType && isExistingParam && (
-              <label style={{ display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer' }}>
-                <Toggle
-                  type={Toggle.Types.HIDE_LABELS}
-                  value={this.state.showDiff}
-                  onChange={showDiff => this.setState({ showDiff })}
-                  additionalStyles={{ margin: '0px' }}
-                  colorLeft="#cbcbcb"
-                  colorRight="#00db7c"
+            {(isJsonType || (isDiffableType && isExistingParam)) && (
+              <div ref={this.optionsRef}>
+                <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 });
+                  }}
                 />
-                <span style={{ color: this.state.showDiff ? '#333' : '#999' }}>Diff</span>
-              </label>
+                {this.state.optionsMenuOpen && this.state.optionsMenuPos && (
+                  <Popover
+                    fixed={true}
+                    position={this.state.optionsMenuPos}
+                    onExternalClick={() => { document.activeElement?.blur(); this.setState({ optionsMenuOpen: false }); }}
+                  >
+                    <div style={{ background: '#fff', border: '1px solid #e1e4e8', borderRadius: '4px', boxShadow: '0 3px 12px rgba(0,0,0,0.15)', padding: '4px 0', minWidth: '130px', transform: 'translateY(-100%)' }}>
+                      {isJsonType && (
+                        <div
+                          onClick={() => this.setState({ wordWrap: !this.state.wordWrap }, this.updateOptionsMenuPos)}
+                          style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', cursor: 'pointer', fontSize: '14px', color: '#333', gap: '8px' }}
+                          onMouseEnter={e => e.currentTarget.style.background = '#f6f8fa'}
+                          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                        >
+                          <span style={{ width: '12px', display: 'inline-block' }}>{this.state.wordWrap && <Icon name="check" width={12} height={12} fill="#00db7c" />}</span>
+                          <span>Word wrap</span>
+                        </div>
+                      )}
+                      {isDiffableType && isExistingParam && (
+                        <div
+                          onClick={() => this.setState({ showDiff: !this.state.showDiff }, this.updateOptionsMenuPos)}
+                          style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', cursor: 'pointer', fontSize: '14px', color: '#333', gap: '8px' }}
+                          onMouseEnter={e => e.currentTarget.style.background = '#f6f8fa'}
+                          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                        >
+                          <span style={{ width: '12px', display: 'inline-block' }}>{this.state.showDiff && <Icon name="check" width={12} height={12} fill="#00db7c" />}</span>
+                          <span>Diff view</span>
+                        </div>
+                      )}
+                    </div>
+                  </Popover>
+                )}
+              </div>
             )}
           </div>
-          <div style={{ display: 'flex', gap: '12px', marginLeft: '20px' }}>
+          <div style={{ display: 'flex', gap: '12px' }}>
             <Button value="Cancel" onClick={this.props.onCancel} />
             <Button
               primary={true}

From b6d934854167072e8e112a176a812daac32c7636 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 27 Feb 2026 17:48:25 +0000
Subject: [PATCH 3/4] fix

---
 src/components/JsonEditor/JsonEditor.scss       | 10 ++++------
 src/dashboard/Data/Config/ConfigDialog.react.js |  4 ++--
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/JsonEditor/JsonEditor.scss b/src/components/JsonEditor/JsonEditor.scss
index 35167e4e79..e0d35af85a 100644
--- a/src/components/JsonEditor/JsonEditor.scss
+++ b/src/components/JsonEditor/JsonEditor.scss
@@ -11,11 +11,6 @@
   position: relative;
   display: inline-block;
   width: 100%;
-  min-width: calc(var(--modal-min-width) * (1 - var(--modal-label-ratio)));
-  height: 200px;
-  min-height: 80px;
-  resize: both;
-  overflow: hidden;
   font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   font-size: 15px;
   line-height: 1.5;
@@ -95,11 +90,14 @@
 .inputLayer {
   display: block;
   width: 100%;
-  height: 100%;
+  min-width: calc(var(--modal-min-width) * (1 - var(--modal-label-ratio)));
   background: transparent;
   color: transparent;
   caret-color: #333;
+  resize: both;
   outline: none;
+  min-height: 80px;
+  height: 200px;
   overflow: auto;
 
   &::placeholder {
diff --git a/src/dashboard/Data/Config/ConfigDialog.react.js b/src/dashboard/Data/Config/ConfigDialog.react.js
index b1511daee2..7c2517c1d5 100644
--- a/src/dashboard/Data/Config/ConfigDialog.react.js
+++ b/src/dashboard/Data/Config/ConfigDialog.react.js
@@ -604,7 +604,7 @@ export default class ConfigDialog extends React.Component {
                     <div style={{ background: '#fff', border: '1px solid #e1e4e8', borderRadius: '4px', boxShadow: '0 3px 12px rgba(0,0,0,0.15)', padding: '4px 0', minWidth: '130px', transform: 'translateY(-100%)' }}>
                       {isJsonType && (
                         <div
-                          onClick={() => this.setState({ wordWrap: !this.state.wordWrap }, this.updateOptionsMenuPos)}
+                          onClick={() => { document.activeElement?.blur(); this.setState({ wordWrap: !this.state.wordWrap, optionsMenuOpen: false }); }}
                           style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', cursor: 'pointer', fontSize: '14px', color: '#333', gap: '8px' }}
                           onMouseEnter={e => e.currentTarget.style.background = '#f6f8fa'}
                           onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
@@ -615,7 +615,7 @@ export default class ConfigDialog extends React.Component {
                       )}
                       {isDiffableType && isExistingParam && (
                         <div
-                          onClick={() => this.setState({ showDiff: !this.state.showDiff }, this.updateOptionsMenuPos)}
+                          onClick={() => { document.activeElement?.blur(); this.setState({ showDiff: !this.state.showDiff, optionsMenuOpen: false }); }}
                           style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', cursor: 'pointer', fontSize: '14px', color: '#333', gap: '8px' }}
                           onMouseEnter={e => e.currentTarget.style.background = '#f6f8fa'}
                           onMouseLeave={e => e.currentTarget.style.background = 'transparent'}

From 14bbb929356b7b021bc9d3bb81838cf9cad94fd1 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 27 Feb 2026 17:56:43 +0000
Subject: [PATCH 4/4] fix scroll bar

---
 src/components/JsonEditor/JsonEditor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/JsonEditor/JsonEditor.scss b/src/components/JsonEditor/JsonEditor.scss
index e0d35af85a..df5f06835e 100644
--- a/src/components/JsonEditor/JsonEditor.scss
+++ b/src/components/JsonEditor/JsonEditor.scss
@@ -42,7 +42,7 @@
   pointer-events: none;
   background: transparent;
   color: #555572;
-  overflow: auto;
+  overflow: hidden;
 
   code {
     display: block;