Update styling on policy editor page

- fix borders
- fix view for smaller screens
- removed some CSS that is now covered by a utility class
- created some CSS that will be a utility class

Changelog: added
EE: true

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

@@ -97,7 +97,7 @@ export default {
   <section>
     <div class="gl-mb-5 gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base">
       <gl-form-group
-        class="gl-px-5 gl-py-3 gl-mb-0 gl-bg-gray-10 gl-border-b-solid gl-border-b-gray-100 gl-border-b-1"
+        class="gl-px-5 gl-py-3 gl-mb-0 gl-bg-gray-10 gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-rounded-top-base"
       >
         <gl-segmented-control
           :options="editorModes"
@@ -106,7 +106,7 @@ export default {
         />
       </gl-form-group>
       <div class="gl-display-flex gl-sm-flex-direction-column">
-        <section class="gl-w-full gl-p-5 gl-flex-fill-4 policy-table-left">
+        <section class="gl-w-full gl-p-5">
           <div v-if="shouldShowRuleEditor" data-testid="rule-editor">
             <slot name="rule-editor"></slot>
           </div>
@@ -120,7 +120,7 @@ export default {
         </section>
         <section
           v-if="shouldShowRuleEditor"
-          class="gl-w-30p gl-p-5 gl-border-l-gray-100 gl-border-l-1 gl-border-l-solid gl-flex-fill-2"
+          class="gl-s-w-half gl-s-max-w-30p gl-p-5 gl-border-l-gray-100 gl-border-l-1 gl-md-border-l-solid"
           data-testid="rule-editor-preview"
         >
           <slot name="rule-editor-preview"></slot>

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

@@ -43,18 +43,18 @@ export default {
       <div
         v-if="policyDescription"
         v-safe-html:[$options.safeHtmlConfig]="policyDescription"
-        class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-py-3 gl-px-4 gl-border-1 gl-border-solid gl-border-gray-100"
+        class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-py-3 gl-px-4 gl-border-1 gl-border-solid gl-border-gray-100 gl-border-t-none!"
       ></div>
       <div v-else>
-        <gl-alert variant="info" :dismissible="false"
-          >{{ $options.i18n.PARSING_ERROR_MESSAGE }}
+        <gl-alert variant="info" :dismissible="false">
+          {{ $options.i18n.PARSING_ERROR_MESSAGE }}
         </gl-alert>
       </div>
     </gl-tab>
     <gl-tab :title="s__('NetworkPolicies|.yaml')">
-      <pre class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none">{{
-        policyYaml
-      }}</pre>
+      <pre class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-border-t-none"
+        >{{ policyYaml }}
+      </pre>
     </gl-tab>
   </gl-tabs>
 </template>

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

@@ -10,6 +10,14 @@
   align-items: flex-start;
 }
 
-.policy-editor .policy-table-left {
-  flex: 4;
+.gl-s-max-w-30p {
+  @media (min-width: $breakpoint-md) {
+    max-width: 30%;
+  }
+}
+
+.gl-s-w-half {
+  @media (min-width: $breakpoint-md) {
+    width: 50%;
+  }
 }

ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_preview_spec.js.snap

@@ -12,7 +12,7 @@ exports[`PolicyPreview component with policy description renders policy preview
     titlelinkclass=""
   >
     <div
-      class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-py-3 gl-px-4 gl-border-1 gl-border-solid gl-border-gray-100"
+      class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-py-3 gl-px-4 gl-border-1 gl-border-solid gl-border-gray-100 gl-border-t-none!"
     >
       <strong>
         bar
@@ -27,9 +27,10 @@ exports[`PolicyPreview component with policy description renders policy preview
     titlelinkclass=""
   >
     <pre
-      class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none"
+      class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-border-t-none"
     >
       foo
+    
     </pre>
   </gl-tab-stub>
 </gl-tabs-stub>