Breaks text in DAST when it overflows

Removes extra margin in DAST modal

Add back todo comment

Render code block in a new line
Fix code block overflowing the modal
Change expand button to use v-if instead

Break the show complete report link when it overflows
Fix eslint

make break-link accessible

app/assets/javascripts/vue_shared/components/expand_button.vue

@@ -39,7 +39,7 @@
       @click="onClick">
       ...
     </button>
-    <span v-show="!isCollapsed">
+    <span v-if="!isCollapsed">
       <slot name="expanded"></slot>
     </span>
   </span>

ee/app/assets/javascripts/vue_shared/security_reports/components/report_issues.vue

@@ -165,7 +165,7 @@
                 type="button"
                 @click="openDastModal(issue, index)"
                 data-toggle="modal"
-                class="js-modal-dast btn-link btn-blank btn-open-modal"
+                class="js-modal-dast btn-link btn-blank btn-open-modal break-link"
                 :data-target="modalTargetId"
               >
                 {{ issue.name }}
@@ -210,7 +210,7 @@
       class="modal-security-report-dast"
     >
 
-      <slot class="modal-lg">
+      <slot>
         {{ modalDesc }}
 
         <h5 class="prepend-top-20">
@@ -241,19 +241,17 @@
                   :href="instance.uri"
                   target="_blank"
                   rel="noopener noreferrer nofollow"
-                  class="prepend-left-5"
+                  class="break-link"
                 >
                   {{ instance.uri }}
                 </a>
               </div>
-              <div>
-                <expand-button v-if="instance.evidence">
-                  <pre
-                    slot="expanded"
-                    class="block report-block-dast-code prepend-top-10"
-                  >{{ instance.evidence }}</pre>
-                </expand-button>
-              </div>
+              <expand-button v-if="instance.evidence">
+                <pre
+                  slot="expanded"
+                  class="block report-block-dast-code prepend-top-10 report-block-issue-code"
+                >{{ instance.evidence }}</pre>
+              </expand-button>
             </div>
           </li>
         </ul>

ee/app/assets/javascripts/vue_shared/security_reports/components/report_section.vue

@@ -223,7 +223,7 @@
       <button
         v-if="allIssues.length && !isFullReportVisible"
         type="button"
-        class="btn-link btn-blank prepend-left-10 js-expand-full-list"
+        class="btn-link btn-blank prepend-left-10 js-expand-full-list break-link"
         @click="openFullReport"
       >
         {{ s__("ciReport|Show complete code vulnerabilities report") }}

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

@@ -55,18 +55,20 @@
   align-self: center;
   margin: 5px 0px;
 
+  .btn-open-modal {
+    text-align: left;
+  }
+}
+
+.report-block {
   .break-link {
     word-wrap: break-word;
     word-break: break-all;
   }
-
-  .btn-open-modal {
-    text-align: left;
-  }
 }
 
 .report-block-issue-code {
-  width: 100%;
+  width: $modal-lg - 70px;
 }
 
 .modal-security-report-dast {
@@ -74,7 +76,7 @@
     width: $modal-lg;
   }
   // TODO remove this when gl_modal support not rendering the footer
-  .moda-footer {
+  .modal-footer {
     display: none;
   }
 }