Merge branch '32951-secure-modal-mobile-issue' into 'master'

Fixes mobile styling issues on security modals

Closes #32951

See merge request gitlab-org/gitlab!19391

app/assets/stylesheets/framework/modal.scss

@@ -49,7 +49,7 @@
   line-height: $line-height-base;
   position: relative;
   min-height: $modal-body-height;
-  padding: #{2 * $grid-size} #{6 * $grid-size} #{2 * $grid-size} #{2 * $grid-size};
+  padding: #{2 * $grid-size};
   text-align: left;
   white-space: normal;
 
@@ -70,9 +70,9 @@
     margin: 0;
   }
 
-  .btn + .btn:not(.dropdown-toggle-split),
   .btn + .btn-group,
-  .btn-group + .btn {
+  .btn-group + .btn,
+  .btn-group + .btn-group {
     margin-left: $grid-size;
   }
 
@@ -83,13 +83,6 @@
   @include media-breakpoint-down(xs) {
     flex-direction: column;
 
-    .btn + .btn:not(.dropdown-toggle-split),
-    .btn + .btn-group,
-    .btn-group + .btn {
-      margin-left: 0;
-      margin-top: $grid-size;
-    }
-
     .btn-group .btn + .btn {
       margin-left: -1px;
       margin-top: 0;

app/assets/stylesheets/pages/reports.scss

@@ -131,7 +131,6 @@
 
 .modal-security-report-dast {
   .modal-dialog {
-    width: $modal-lg;
     max-width: $modal-lg;
   }
 

changelogs/unreleased/32951-secure-modal-mobile-issue.yml

+---
+title: Fixes mobile styling issues on security modals
+merge_request: 19391
+author:
+type: fixed

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

@@ -43,9 +43,9 @@ export default {
 
 <template>
   <div class="border-white mb-0 px-3">
-    <div v-for="(field, key, index) in details" :key="index" class="d-flex my-2">
-      <label class="col-2 text-right font-weight-bold pl-0">{{ field.text }}:</label>
-      <div class="col-10 pl-0 text-secondary">
+    <div v-for="(field, key, index) in details" :key="index" class="d-sm-flex my-sm-2 my-4">
+      <label class="col-sm-2 text-sm-right font-weight-bold pl-0">{{ field.text }}:</label>
+      <div class="col-sm-10 pl-0 text-secondary">
         <template v-if="hasValue(field)">
           <div v-if="hasInstances(key)" class="info-well">
             <ul class="report-block-list">