diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_vuex.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_vuex.vue
index b7558933d1f7fdcb98d5a9ccccdfacc976138c78..4a5d19525666203a1c75e939e7fb18f05584383f 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_vuex.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_vuex.vue
@@ -1,9 +1,9 @@
<script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlCard } from '@gitlab/ui';
export default {
name: 'SolutionCard',
- components: { GlIcon },
+ components: { GlIcon, GlCard },
props: {
solution: {
type: String,
@@ -42,29 +42,33 @@ export default {
};
</script>
<template>
- <div class="card my-4">
- <div v-if="solutionText" class="card-body d-flex align-items-center">
- <div
- class="col-auto d-flex align-items-center pl-0"
- :class="{ 'col-md-2': !isStandaloneVulnerability }"
- >
- <div class="circle-icon-container pr-3" aria-hidden="true"><gl-icon name="bulb" /></div>
- <strong class="text-right flex-grow-1">{{ s__('ciReport|Solution') }}:</strong>
- </div>
- <span class="flex-shrink-1 pl-0" :class="{ 'col-md-10': !isStandaloneVulnerability }">{{
- solutionText
- }}</span>
- </div>
- <template v-if="showCreateMergeRequestMsg">
- <div class="card-footer" :class="{ 'border-0': !solutionText }">
- <em class="text-secondary">
- {{
- s__(
- 'ciReport|Create a merge request to implement this solution, or download and apply the patch manually.',
- )
- }}
- </em>
+ <gl-card
+ class="gl-my-6"
+ :body-class="{ 'gl-p-0': !solutionText }"
+ :footer-class="{ 'gl-border-0': !solutionText }"
+ >
+ <template v-if="solutionText" #default>
+ <div class="gl-display-flex gl-align-items-center">
+ <div
+ class="col-auto gl-display-flex gl-align-items-center gl-justify-content-end gl-pl-0"
+ :class="{ 'col-md-2': !isStandaloneVulnerability }"
+ >
+ <gl-icon class="gl-mr-5" name="bulb" />
+ <strong>{{ s__('ciReport|Solution') }}:</strong>
+ </div>
+ <span class="flex-shrink-1 gl-pl-0" :class="{ 'col-md-10': !isStandaloneVulnerability }">{{
+ solutionText
+ }}</span>
</div>
</template>
- </div>
+ <template v-if="showCreateMergeRequestMsg" #footer>
+ <em class="gl-text-gray-500" data-testid="merge-request-solution">
+ {{
+ s__(
+ 'ciReport|Create a merge request to implement this solution, or download and apply the patch manually.',
+ )
+ }}
+ </em>
+ </template>
+ </gl-card>
</template>
diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue
index c737469ee17debde79cc1ea658f091cefee296d9..a9e9e16d678d29c425e4786b3c242f5c3a318e01 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue
@@ -12,8 +12,8 @@ export default {
<template functional>
<div class="d-sm-flex my-sm-2 my-4">
- <label class="col-sm-4 text-sm-right font-weight-bold pl-0">{{ props.label }}:</label>
- <div class="col-sm-8 pl-0 text-secondary">
+ <label class="col-sm-2 text-sm-right gl-font-weight-bold gl-pl-0">{{ props.label }}:</label>
+ <div class="col-sm-10 gl-pl-0 gl-text-gray-500">
<slot></slot>
</div>
</div>
diff --git a/ee/changelogs/unreleased/281721-adjust-vuln-modal-column-width.yml b/ee/changelogs/unreleased/281721-adjust-vuln-modal-column-width.yml
new file mode 100644
index 0000000000000000000000000000000000000000..cde58c3d704645f70acbb09b03329f9bde763c52
--- /dev/null
+++ b/ee/changelogs/unreleased/281721-adjust-vuln-modal-column-width.yml
@@ -0,0 +1,5 @@
+---
+title: Fix alignment issues in vulnerability modals
+merge_request: 55716
+author:
+type: fixed
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap
index 9e03fd6eea25e881302eca012562cc47e8d44dab..0078dddfb053fef1efa4ff8efa0b3b6c0dff17db 100644
--- a/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap
+++ b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap
@@ -5,13 +5,13 @@ exports[`VulnerabilityDetail component renders the label prop and default slot 1
class="d-sm-flex my-sm-2 my-4"
>
<label
- class="col-sm-4 text-sm-right font-weight-bold pl-0"
+ class="col-sm-2 text-sm-right gl-font-weight-bold gl-pl-0"
>
foo:
</label>
<div
- class="col-sm-8 pl-0 text-secondary"
+ class="col-sm-10 gl-pl-0 gl-text-gray-500"
>
<p>
bar
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js b/ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js
index ca888ab09e0079a1bdcb67500eb855359af78ee0..45dfad603f79e7f927ae963d56b03ac8415a35c1 100644
--- a/ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js
+++ b/ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js
@@ -1,3 +1,4 @@
+import { GlCard } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import component from 'ee/vue_shared/security_reports/components/solution_card_vuex.vue';
@@ -19,13 +20,15 @@ describe('Solution Card', () => {
it('takes the value of solution', () => {
const propsData = { solution };
wrapper = shallowMount(Component, { propsData });
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(`Solution: ${solution}`);
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
+ `Solution: ${solution}`,
+ );
});
it('takes the summary from a remediation', () => {
const propsData = { remediation };
wrapper = shallowMount(Component, { propsData });
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
`Solution: ${remediation.summary}`,
);
});
@@ -33,7 +36,9 @@ describe('Solution Card', () => {
it('takes the value of solution, if both are defined', () => {
const propsData = { remediation, solution };
wrapper = shallowMount(Component, { propsData });
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(`Solution: ${solution}`);
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
+ `Solution: ${solution}`,
+ );
});
});
});
@@ -46,7 +51,9 @@ describe('Solution Card', () => {
});
it('renders the solution text and label', () => {
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(`Solution: ${solution}`);
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
+ `Solution: ${solution}`,
+ );
});
it('does not render the card footer', () => {
@@ -65,7 +72,7 @@ describe('Solution Card', () => {
});
it('renders the solution text and label', () => {
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
`Solution: ${remediation.summary}`,
);
});
@@ -84,7 +91,7 @@ describe('Solution Card', () => {
});
it('renders the create a merge request to implement this solution message', () => {
- expect(wrapper.find('.card-footer').text()).toMatch(
+ expect(wrapper.find('[data-testid="merge-request-solution"]').text()).toMatch(
s__(
'ciReport|Create a merge request to implement this solution, or download and apply the patch manually.',
),
@@ -94,7 +101,7 @@ describe('Solution Card', () => {
describe('without download patch', () => {
it('does not render the card footer', () => {
- expect(wrapper.find('.card-footer').exists()).toBe(false);
+ expect(wrapper.find('[data-testid="merge-request-solution"]').exists()).toBe(false);
});
});
});