Update column width

* Adjust response styles

Tweak alignment for solution text

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

 <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>

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>

ee/changelogs/unreleased/281721-adjust-vuln-modal-column-width.yml

+---
+title: Fix alignment issues in vulnerability modals
+merge_request: 55716
+author:
+type: fixed

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

ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js

+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);
         });
       });
     });