Wrap issues more gracefully

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

@@ -119,74 +119,77 @@
 <template>
   <ul class="report-block-list">
     <li
-      :class="{
-        failed: isStatusFailed,
-        success: isStatusSuccess,
-        neutral: isStatusNeutral
-      }"
-      class="report-block-list-item"
+      class="report-block-list-issue"
       v-for="(issue, index) in issues"
       :key="index"
     >
-      <icon
-        class="report-block-icon"
-        :name="iconName"
-        :size="32"
-      />
+      <div
+        class="report-block-list-icon append-right-5"
+        :class="{
+          failed: isStatusFailed,
+          success: isStatusSuccess,
+          neutral: isStatusNeutral
+        }">
+        <icon
+          :name="iconName"
+          :size="32"
+        />
+      </div>
+      <div class="report-block-list-issue-description">
+        <div class="report-block-list-issue-description-text append-right-5">
+          <template v-if="isStatusSuccess && isTypeQuality">{{ fixedLabel }}</template>
+          <template v-if="shouldRenderPriority(issue)">{{ issue.priority }}:</template>
 
-      <template v-if="isStatusSuccess && isTypeQuality">{{ fixedLabel }}</template>
-      <template v-if="shouldRenderPriority(issue)">{{ issue.priority }}:</template>
+          <template v-if="isTypeDocker">
+            <a
+              v-if="issue.nameLink"
+              :href="issue.nameLink"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+            >{{ issue.name }}</a>
+            <template v-else>
+              {{ issue.name }}
+            </template>
+          </template>
+          <template v-else-if="isTypeDast">
+            <button
+              type="button"
+              @click="openDastModal(issue, index)"
+              data-toggle="modal"
+              class="btn-link btn-blank btn-open-modal"
+              :data-target="modalTargetId"
+            >
+              {{ issue.name }}
+            </button>
+          </template>
+          <template v-else>
+            {{ issue.name }}<template v-if="issue.score">:
+            <strong>{{ formatScore(issue.score) }}</strong></template>
+          </template>
 
-      <template v-if="isTypeDocker">
-        <a
-          v-if="issue.nameLink"
-          :href="issue.nameLink"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-          class="prepend-left-5"
-        >
-          {{ issue.name }}
-        </a>
-        <template v-else>
-          {{ issue.name }}
-        </template>
-      </template>
-      <template v-else-if="isTypeDast">
-        <button
-          type="button"
-          @click="openDastModal(issue, index)"
-          data-toggle="modal"
-          class="btn-link btn-blank btn-open-modal"
-          :data-target="modalTargetId"
-        >
-          {{ issue.name }}
-        </button>
-      </template>
-      <template v-else>
-        {{ issue.name }}<template v-if="issue.score">:
-        <strong>{{ formatScore(issue.score) }}</strong></template>
-      </template>
+          <template v-if="isTypePerformance && issue.delta != null">
+            ({{ issue.delta >= 0 ? '+' : '' }}{{ formatScore(issue.delta) }})
+          </template>
+        </div>
+        <div class="report-block-list-issue-description-link">
+          <template v-if="issue.path">
+            in
 
-      <template v-if="isTypePerformance && issue.delta != null">
-        ({{ issue.delta >= 0 ? '+' : '' }}{{ formatScore(issue.delta) }})
-      </template>
-
-      <template v-if="issue.path">
-        in
-
-        <a
-          v-if="issue.urlPath"
-          :href="issue.urlPath"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-          class="prepend-left-5"
-        >
-          {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template>
-        </a>
-        <template v-else>
-          {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template>
-        </template>
-      </template>
+            <a
+              v-if="issue.urlPath"
+              :href="issue.urlPath"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="break-link"
+            >
+              {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template>
+            </a>
+            <template v-else>
+              {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template>
+            </template>
+          </template>
+        </div>
+      </div>
     </li>
 
     <modal

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

@@ -96,7 +96,9 @@
         return this.status === 'success';
       },
       statusIconName() {
-        if (this.loadingFailed || this.unresolvedIssues.length) {
+        if (this.loadingFailed ||
+          this.unresolvedIssues.length ||
+          this.neutralIssues.length) {
           return 'warning';
         }
         return 'success';

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

+.pipeline-tab-content {
+  .space-children,
+  .space-children > * {
+    display: flex;
+  }
+
+  .media {
+    align-items: center;
+  }
+}
+
 .report-block-container {
   border-top: 1px solid $gray-darker;
   padding: $gl-padding-top;
   background-color: $gray-light;
   margin: $gl-padding #{-$gl-padding} #{-$gl-padding};
-}
 
-.report-block-dast-code {
-  margin-left: 26px;
+  // Clean MR widget CSS
+  line-height: 20px;
 }
 
 .report-block-list {
   list-style: none;
   padding: 0 1px;
   margin: 0;
-  line-height: $code_line_height;
-
-  .btn-open-modal {
-    padding: 0 5px 4px;
-  }
-
-  .report-block-list-item {
-    display: flex;
-  }
+}
 
-  .report-block-list-item-modal {
-    display: flex;
-    flex-wrap: wrap;
-  }
+.report-block-list-icon {
+  display: flex;
 
-  .failed .report-block-icon {
+  &.failed {
     color: $red-500;
   }
 
-  .success .report-block-icon {
+  &.success {
     color: $green-500;
   }
 
-  .neutral .report-block-icon {
+  &.neutral {
     color: $theme-gray-700;
   }
+}
 
-  .report-block-icon {
-    margin: -5px 4px 0 0;
-    fill: currentColor;
-  }
+.report-block-list-issue {
+  display: flex;
+  align-items: flex-start;
+  align-content: flex-start;
 }
 
-.pipeline-tab-content {
-  .space-children,
-  .space-children > * {
-    display: flex;
+.report-block-list-issue-description {
+  align-content: space-around;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  display: flex;
+  align-self: center;
+  margin: 5px 0px;
+
+  .break-link {
+    word-wrap: break-word;
+    word-break: break-all;
   }
 
-  .media {
-    align-items: center;
+  .btn-open-modal {
+    text-align: left;
   }
-}
\ No newline at end of file
+}