Merge branch '4944-dast-modal' into 'master'

Resolve "CSS in modal for DAST report is broken"

Closes #4944

See merge request gitlab-org/gitlab-ee!4554

app/assets/stylesheets/pages/merge_requests.scss

@@ -805,10 +805,19 @@
       margin: 0;
       line-height: $code_line_height;
 
+      .btn-open-modal {
+        padding: 0 5px 4px;
+      }
+
       .mr-widget-code-quality-list-item {
         display: flex;
       }
 
+      .mr-widget-code-quality-list-item-modal {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
       .failed .mr-widget-code-quality-icon {
         color: $red-500;
       }

changelogs/unreleased-ee/4944-dast-modal.yml

+---
+title: Fix broken CSS in modal for DAST report
+merge_request:
+author:
+type: fixed

ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_dast_modal.vue

 <script>
   import { s__ } from '~/locale';
-  import { spriteIcon } from '~/lib/utils/common_utils';
-  import expandButton from '~/vue_shared/components/expand_button.vue';
+  import Icon from '~/vue_shared/components/icon.vue';
+  import ExpandButton from '~/vue_shared/components/expand_button.vue';
 
   export default {
     name: 'ModalDast',
     components: {
-      expandButton,
+      ExpandButton,
+      Icon,
     },
     props: {
       title: {
@@ -27,13 +28,10 @@
       instances: {
         type: Array,
         required: false,
-        default: () => [],
+        default: () => ([]),
       },
     },
     computed: {
-      cutIcon() {
-        return spriteIcon('cut');
-      },
       instancesLabel() {
         return s__('ciReport|Instances');
       },
@@ -54,7 +52,7 @@
     role="dialog"
   >
     <div
-      class="modal-dialog"
+      class="modal-dialog modal-lg"
       role="document"
     >
       <div class="modal-content">
@@ -83,18 +81,21 @@
             <li
               v-for="(instance, i) in instances"
               :key="i"
-              class="failed"
+              class="mr-widget-code-quality-list-item-modal failed"
             >
-              <span
+              <icon
                 class="mr-widget-code-quality-icon"
-                v-html="cutIcon"
-              >
-              </span>
+                name="status_failed_borderless"
+                :size="32"
+              />
+
               {{ instance.method }}
+
               <a
                 :href="instance.uri"
                 target="_blank"
                 rel="noopener noreferrer nofollow"
+                class="prepend-left-5"
               >
                 {{ instance.uri }}
               </a>

ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_report_issues.vue

@@ -143,6 +143,7 @@
           :href="issue.nameLink"
           target="_blank"
           rel="noopener noreferrer nofollow"
+          class="prepend-left-5"
         >
           {{ issue.name }}
         </a>
@@ -155,7 +156,7 @@
           type="button"
           @click="openDastModal(issue, index)"
           data-toggle="modal"
-          class="btn-link btn-blank"
+          class="btn-link btn-blank btn-open-modal"
           :data-target="modalTargetId"
         >
           {{ issue.name }}