Fix yaml viewer padding not changing color

- a user can update the color preferences of the text editor
- the yaml viewer/editor was not updating colors appropriately
  because of some CSS hacking
- with the newer version of monaco, we can remove the CSS
  hacks and properly fix the padding

Changelog: fixed
EE: true

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/policy_drawer.vue

 <script>
 import { GlButton, GlDrawer } from '@gitlab/ui';
-import { getContentWrapperHeight } from '../../utils';
+import { getContentWrapperHeight, removeUnnecessaryDashes } from '../../utils';
 import { POLICIES_LIST_CONTAINER_CLASS, POLICY_TYPE_COMPONENT_OPTIONS } from '../constants';
 import CiliumNetworkPolicy from './cilium_network_policy.vue';
 import ScanExecutionPolicy from './scan_execution_policy.vue';
@@ -45,6 +45,9 @@ export default {
     policyComponent() {
       return policyComponent[this.policyType] || null;
     },
+    policyYaml() {
+      return removeUnnecessaryDashes(this.policy.yaml);
+    },
   },
   methods: {
     getDrawerHeaderHeight() {
@@ -84,13 +87,7 @@ export default {
         <p>
           {{ s__("NetworkPolicies|Define this policy's location, conditions and actions.") }}
         </p>
-        <div class="gl-p-3 gl-bg-gray-50">
-          <policy-yaml-editor
-            :value="policy.yaml"
-            data-testid="policy-yaml-editor"
-            class="network-policy-editor"
-          />
-        </div>
+        <policy-yaml-editor :value="policyYaml" data-testid="policy-yaml-editor" />
       </div>
     </div>
   </gl-drawer>

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_editor_layout.vue

@@ -111,7 +111,7 @@ export default {
         />
       </gl-form-group>
       <div class="gl-display-flex gl-sm-flex-direction-column">
-        <section class="gl-w-full gl-p-5">
+        <section class="gl-w-full" :class="{ 'gl-p-5': shouldShowRuleEditor }">
           <div v-if="shouldShowRuleEditor" data-testid="rule-editor">
             <slot name="rule-editor"></slot>
           </div>

ee/app/assets/javascripts/threat_monitoring/components/policy_yaml_editor.vue

@@ -21,8 +21,8 @@ export default {
       return {
         lineNumbers: 'off',
         folding: false,
-        // Investigate the necessity of `glyphMargin` with #326746
-        glyphMargin: false,
+        // This represents 14px, which matches the number of pixels added to the left via glyphMargin
+        padding: { top: 14 },
         renderIndentGuides: false,
         renderWhitespace: 'boundary',
         renderLineHighlight: 'none',

ee/app/assets/stylesheets/pages/threat_management.scss

-.network-policy-editor {
-  .monaco-editor,
-  .monaco-editor-background,
-  .monaco-editor .inputarea.ime-input {
-    background-color: $gray-50;
-  }
-}
-
 .threat-monitoring-alert-drawer .gl-drawer-header {
   align-items: flex-start;
 }