diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss
index a5cc37cec2ae..b589069b9017 100644
--- a/ui/app/styles/core/element-styling.scss
+++ b/ui/app/styles/core/element-styling.scss
@@ -84,8 +84,6 @@ html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   min-width: 300px;
-  overflow-x: hidden;
-  overflow-y: scroll;
   text-rendering: optimizeLegibility;
   text-size-adjust: 100%;
 }
@@ -124,6 +122,8 @@ pre code {
 body {
   font-size: $size-6;
   line-height: 1.5;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 a {
diff --git a/ui/lib/core/addon/components/json-editor.hbs b/ui/lib/core/addon/components/json-editor.hbs
index 329fb79038a3..83cddee65308 100644
--- a/ui/lib/core/addon/components/json-editor.hbs
+++ b/ui/lib/core/addon/components/json-editor.hbs
@@ -29,6 +29,7 @@
           {{/if}}
           <div class="toolbar-separator"></div>
           <Hds::Copy::Button
+            @container={{@container}}
             @text="Copy"
             @isIconOnly={{true}}
             @textToCopy={{@value}}
@@ -52,6 +53,7 @@
       onSetup=this.onSetup
       onUpdate=this.onUpdate
       onFocus=this.onFocus
+      autoRefresh=(if @container true false)
     }}
     class={{if @readOnly "readonly-codemirror"}}
     data-test-component="code-mirror-modifier"
diff --git a/ui/lib/core/addon/components/json-editor.js b/ui/lib/core/addon/components/json-editor.js
index c9e6c2d84fd2..86a28f1a8aeb 100644
--- a/ui/lib/core/addon/components/json-editor.js
+++ b/ui/lib/core/addon/components/json-editor.js
@@ -27,6 +27,10 @@ import { action } from '@ember/object';
  * @param {String} [value] - Value within the display. Generally, a json string.
  * @param {String} [viewportMargin] - Size of viewport. Often set to "Infinity" to load/show all text regardless of length.
  * @param {string} [example] - Example to show when value is null -- when example is provided a restore action will render in the toolbar to clear the current value and show the example after input
+ * * REQUIRED if rendering within a modal *
+ * @container gives context for the <Hd::Copy::Button> and sets autoRefresh=true so JsonEditor renders content (without this property @value only renders if editor is focused)
+ * @param {string} [container] - Selector string or element object of containing element, set the focused element as the container value. This is for the Hds::Copy::Button and to set autoRefresh=true so content renders https://hds-website-hashicorp.vercel.app/components/copy/button?tab=code
+ *
  */
 
 export default class JsonEditorComponent extends Component {
diff --git a/ui/lib/core/addon/modifiers/code-mirror.js b/ui/lib/core/addon/modifiers/code-mirror.js
index 7aa2e86427e5..2860684abeaf 100644
--- a/ui/lib/core/addon/modifiers/code-mirror.js
+++ b/ui/lib/core/addon/modifiers/code-mirror.js
@@ -10,6 +10,7 @@ import Modifier from 'ember-modifier';
 
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/display/autorefresh';
 import 'codemirror/addon/lint/lint.js';
 import 'codemirror/addon/lint/json-lint.js';
 // right now we only use the ruby and javascript, if you use another mode you'll need to import it.
@@ -62,6 +63,7 @@ export default class CodeMirrorModifier extends Modifier {
       theme: namedArgs.theme || 'hashi',
       value: namedArgs.content || '',
       viewportMargin: namedArgs.viewportMargin || '',
+      autoRefresh: namedArgs.autoRefresh,
     });
 
     editor.on('change', bind(this, this._onChange, namedArgs));