Improve ConfigurationPageLayout UX

ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue

@@ -72,7 +72,7 @@ export default {
 </script>
 
 <template>
-  <configuration-page-layout v-if="hasData">
+  <configuration-page-layout v-if="hasData" no-border>
     <template #heading>
       {{ $options.i18n.title }}
     </template>

ee/app/assets/javascripts/security_configuration/components/configuration_page_layout.vue

+<script>
+export default {
+  props: {
+    noBorder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <article>
     <slot name="alert"></slot>
     <header
-      class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
+      class="gl-mt-5 gl-display-flex gl-justify-content-space-between"
+      :class="{
+        ['gl-mb-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid']: !noBorder,
+      }"
+    >
+      <div
+        class="gl-display-flex gl-flex-direction-column gl-w-full gl-justify-content-space-between gl-md-flex-direction-row"
       >
         <div>
           <h4 class="gl-mt-0">
@@ -12,9 +30,10 @@
             <slot name="description"></slot>
           </p>
         </div>
-      <div>
+        <div class="">
           <slot name="actions"></slot>
         </div>
+      </div>
     </header>
     <slot></slot>
   </article>

ee/spec/frontend/security_configuration/components/__snapshots__/configuration_page_layout_spec.js.snap

@@ -4,7 +4,10 @@ exports[`Security Configuration Page Layout component matches the snapshot 1`] =
 <article>
   Page alert 
   <header
-    class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
+    class="gl-mt-5 gl-display-flex gl-justify-content-space-between gl-mb-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
+  >
+    <div
+      class="gl-display-flex gl-flex-direction-column gl-w-full gl-justify-content-space-between gl-md-flex-direction-row"
     >
       <div>
         <h4
@@ -21,6 +24,7 @@ exports[`Security Configuration Page Layout component matches the snapshot 1`] =
       <div>
         Action
       </div>
+    </div>
   </header>
    
   <div>

ee/spec/frontend/security_configuration/components/configuration_page_layout_spec.js

+import { within } from '@testing-library/dom';
 import ConfigurationPageLayout from 'ee/security_configuration/components/configuration_page_layout.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('Security Configuration Page Layout component', () => {
   let wrapper;
 
+  const withinComponent = () => within(wrapper.element);
+  const findHeader = () => withinComponent().getByRole('banner');
+
   const createComponent = (options = {}) => {
     wrapper = shallowMountExtended(ConfigurationPageLayout, {
       slots: {
@@ -25,4 +29,24 @@ describe('Security Configuration Page Layout component', () => {
     createComponent();
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  describe('border', () => {
+    const borderClasses = 'gl-mb-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid';
+
+    it('adds border classes by default', () => {
+      createComponent();
+
+      expect(findHeader().className).toContain(borderClasses);
+    });
+
+    it('does not add border classes if no-border is true', () => {
+      createComponent({
+        propsData: {
+          noBorder: true,
+        },
+      });
+
+      expect(findHeader().className).not.toContain(borderClasses);
+    });
+  });
 });