Fix margin of blocks

Issue: SILABMC-193

4 files changed, 220 insertions, 203 deletions

diff --git a/src/views/HardwareStatus/Sensors/Sensors.vue b/src/views/HardwareStatus/Sensors/Sensors.vue
index 6329d9d8..f7e72797 100644
--- a/src/views/HardwareStatus/Sensors/Sensors.vue
+++ b/src/views/HardwareStatus/Sensors/Sensors.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid="xl">
+  <b-container>
     <page-title />
     <b-row class="align-items-end">
       <b-col sm="6" md="5" xl="4">
@@ -254,3 +254,8 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+.container > .page-title > .text-title {
+  margin-left: 0 !important;
+}
+</style>
diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index f685e608..6c4757c7 100644
--- a/src/views/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue
@@ -1,100 +1,101 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="pt-0 m-0">
     <page-title />
-    <b-row class="margin-bottom--16px">
-      <b-col xl="11">
-        <!-- Expired certificates banner -->
-        <alert :show="expiredCertificateTypes.length > 0" variant="danger">
-          <template v-if="expiredCertificateTypes.length > 1">
-            {{ $t('pageCertificates.alert.certificatesExpiredMessage') }}
-          </template>
-          <template v-else>
-            {{
-              $t('pageCertificates.alert.certificateExpiredMessage', {
-                certificate: expiredCertificateTypes[0],
-              })
-            }}
-          </template>
-        </alert>
-        <!-- Expiring certificates banner -->
-        <alert :show="expiringCertificateTypes.length > 0" variant="warning">
-          <template v-if="expiringCertificateTypes.length > 1">
-            {{ $t('pageCertificates.alert.certificatesExpiringMessage') }}
-          </template>
-          <template v-else>
-            {{
-              $t('pageCertificates.alert.certificateExpiringMessage', {
-                certificate: expiringCertificateTypes[0],
-              })
-            }}
-          </template>
-        </alert>
-      </b-col>
-    </b-row>
-    <b-row class="margin-bottom--16px">
-      <b-col xl="11" class="text-right">
-        <b-button
-          v-b-modal.generate-csr
-          data-test-id="certificates-button-generateCsr"
-          variant="link"
-        >
-          <icon-add />
-          {{ $t('pageCertificates.generateCsr') }}
-        </b-button>
-        <b-button
-          variant="primary"
-          :disabled="certificatesForUpload.length === 0"
-          @click="initModalUploadCertificate(null)"
-        >
-          <icon-add />
-          {{ $t('pageCertificates.addNewCertificate') }}
-        </b-button>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="11">
-        <b-table
-          id="certificates-table"
-          responsive="md"
-          show-empty
-          hover
-          no-border-collapse
-          :busy="isBusy"
-          :fields="fields"
-          :items="tableItems"
-          :empty-text="$t('global.table.emptyMessage')"
-        >
-          <template #cell(validFrom)="{ value }">
-            {{ value | formatDate }}
-          </template>
+    <page-section class="bootstrap-table__section">
+      <b-row class="margin-bottom--16px">
+        <b-col xl="11">
+          <!-- Expired certificates banner -->
+          <alert :show="expiredCertificateTypes.length > 0" variant="danger">
+            <template v-if="expiredCertificateTypes.length > 1">
+              {{ $t('pageCertificates.alert.certificatesExpiredMessage') }}
+            </template>
+            <template v-else>
+              {{
+                $t('pageCertificates.alert.certificateExpiredMessage', {
+                  certificate: expiredCertificateTypes[0],
+                })
+              }}
+            </template>
+          </alert>
+          <!-- Expiring certificates banner -->
+          <alert :show="expiringCertificateTypes.length > 0" variant="warning">
+            <template v-if="expiringCertificateTypes.length > 1">
+              {{ $t('pageCertificates.alert.certificatesExpiringMessage') }}
+            </template>
+            <template v-else>
+              {{
+                $t('pageCertificates.alert.certificateExpiringMessage', {
+                  certificate: expiringCertificateTypes[0],
+                })
+              }}
+            </template>
+          </alert>
+        </b-col>
+      </b-row>
+      <b-row class="margin-bottom--16px">
+        <b-col xl="11" class="text-right">
+          <b-button
+            v-b-modal.generate-csr
+            data-test-id="certificates-button-generateCsr"
+            variant="link"
+          >
+            <icon-add />
+            {{ $t('pageCertificates.generateCsr') }}
+          </b-button>
+          <b-button
+            variant="primary"
+            :disabled="certificatesForUpload.length === 0"
+            @click="initModalUploadCertificate(null)"
+          >
+            <icon-add />
+            {{ $t('pageCertificates.addNewCertificate') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col xl="11">
+          <b-table
+            id="certificates-table"
+            responsive="md"
+            show-empty
+            hover
+            no-border-collapse
+            :busy="isBusy"
+            :fields="fields"
+            :items="tableItems"
+            :empty-text="$t('global.table.emptyMessage')"
+          >
+            <template #cell(validFrom)="{ value }">
+              {{ value | formatDate }}
+            </template>
 
-          <template #cell(validUntil)="{ value }">
-            <status-icon
-              v-if="getDaysUntilExpired(value) < 31"
-              :status="getIconStatus(value)"
-            />
-            {{ value | formatDate }}
-          </template>
-
-          <template #cell(actions)="{ value, item }">
-            <table-row-action
-              v-for="(action, index) in value"
-              :key="index"
-              :value="action.value"
-              :title="action.title"
-              :enabled="action.enabled"
-              @click-table-action="onTableRowAction($event, item)"
-            >
-              <template #icon>
-                <icon-replace v-if="action.value === 'replace'" />
-                <icon-trashcan v-if="action.value === 'delete'" />
-              </template>
-            </table-row-action>
-          </template>
-        </b-table>
-      </b-col>
-    </b-row>
+            <template #cell(validUntil)="{ value }">
+              <status-icon
+                v-if="getDaysUntilExpired(value) < 31"
+                :status="getIconStatus(value)"
+              />
+              {{ value | formatDate }}
+            </template>
 
+            <template #cell(actions)="{ value, item }">
+              <table-row-action
+                v-for="(action, index) in value"
+                :key="index"
+                :value="action.value"
+                :title="action.title"
+                :enabled="action.enabled"
+                @click-table-action="onTableRowAction($event, item)"
+              >
+                <template #icon>
+                  <icon-replace v-if="action.value === 'replace'" />
+                  <icon-trashcan v-if="action.value === 'delete'" />
+                </template>
+              </table-row-action>
+            </template>
+          </b-table>
+        </b-col>
+      </b-row>
+    </page-section>
     <!-- Modals -->
     <modal-upload-certificate :certificate="modalCertificate" @ok="onModalOk" />
     <modal-generate-csr />
@@ -109,6 +110,7 @@ import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
 import ModalGenerateCsr from './ModalGenerateCsr';
 import ModalUploadCertificate from './ModalUploadCertificate';
 import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
 import TableRowAction from '@/components/Global/TableRowAction';
 import StatusIcon from '@/components/Global/StatusIcon';
 import Alert from '@/components/Global/Alert';
@@ -126,6 +128,7 @@ export default {
     ModalGenerateCsr,
     ModalUploadCertificate,
     PageTitle,
+    PageSection,
     StatusIcon,
     TableRowAction,
   },
diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index 1f2108de..7d1b241d 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -1,7 +1,10 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="pt-0 m-0">
     <page-title :description="$t('pageLdap.pageDescription')" />
-    <page-section :section-title="$t('pageLdap.settings')">
+    <page-section
+      :section-title="$t('pageLdap.settings')"
+      class="bootstrap-table__section"
+    >
       <b-form novalidate @submit.prevent="handleSubmit">
         <b-row>
           <b-col>
@@ -223,7 +226,10 @@
     </page-section>
 
     <!-- Role groups -->
-    <page-section :section-title="$t('pageLdap.roleGroups')">
+    <page-section
+      :section-title="$t('pageLdap.roleGroups')"
+      class="bootstrap-table__section"
+    >
       <table-role-groups />
     </page-section>
   </b-container>
diff --git a/src/views/SecurityAndAccess/Policies/Policies.vue b/src/views/SecurityAndAccess/Policies/Policies.vue
index 1dc197c7..4c866122 100644
--- a/src/views/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/SecurityAndAccess/Policies/Policies.vue
@@ -1,122 +1,125 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="pt-0 m-0">
     <page-title />
-    <b-row>
-      <b-col md="8">
-        <b-row v-if="!modifySSHPolicyDisabled" class="setting-section">
-          <b-col class="d-flex align-items-center justify-content-between">
-            <dl class="mr-3 w-75">
-              <dt>{{ $t('pagePolicies.ssh') }}</dt>
-              <dd>
-                {{ $t('pagePolicies.sshDescription') }}
-              </dd>
-            </dl>
-            <b-form-checkbox
-              id="sshSwitch"
-              v-model="sshProtocolState"
-              data-test-id="policies-toggle-bmcShell"
-              switch
-              @change="changeSshProtocolState"
-            >
-              <span class="sr-only">
-                {{ $t('pagePolicies.ssh') }}
-              </span>
-              <span v-if="sshProtocolState">
-                {{ $t('global.status.enabled') }}
-              </span>
-              <span v-else>{{ $t('global.status.disabled') }}</span>
-            </b-form-checkbox>
-          </b-col>
-        </b-row>
-        <b-row class="setting-section">
-          <b-col class="d-flex align-items-center justify-content-between">
-            <dl class="mt-3 mr-3 w-75">
-              <dt>{{ $t('pagePolicies.ipmi') }}</dt>
-              <dd>
-                {{ $t('pagePolicies.ipmiDescription') }}
-              </dd>
-            </dl>
-            <b-form-checkbox
-              id="ipmiSwitch"
-              v-model="ipmiProtocolState"
-              data-test-id="polices-toggle-networkIpmi"
-              switch
-              @change="changeIpmiProtocolState"
-            >
-              <span class="sr-only">
-                {{ $t('pagePolicies.ipmi') }}
-              </span>
-              <span v-if="ipmiProtocolState">
-                {{ $t('global.status.enabled') }}
-              </span>
-              <span v-else>{{ $t('global.status.disabled') }}</span>
-            </b-form-checkbox>
-          </b-col>
-        </b-row>
-        <b-row class="setting-section">
-          <b-col class="d-flex align-items-center justify-content-between">
-            <dl class="mt-3 mr-3 w-75">
-              <dt>{{ $t('pagePolicies.vtpm') }}</dt>
-              <dd>
-                {{ $t('pagePolicies.vtpmDescription') }}
-              </dd>
-            </dl>
-            <b-form-checkbox
-              id="vtpmSwitch"
-              v-model="vtpmState"
-              data-test-id="policies-toggle-vtpm"
-              switch
-              @change="changeVtpmState"
-            >
-              <span class="sr-only">
-                {{ $t('pagePolicies.vtpm') }}
-              </span>
-              <span v-if="vtpmState">
-                {{ $t('global.status.enabled') }}
-              </span>
-              <span v-else>{{ $t('global.status.disabled') }}</span>
-            </b-form-checkbox>
-          </b-col>
-        </b-row>
-        <b-row class="setting-section">
-          <b-col class="d-flex align-items-center justify-content-between">
-            <dl class="mt-3 mr-3 w-75">
-              <dt>{{ $t('pagePolicies.rtad') }}</dt>
-              <dd>
-                {{ $t('pagePolicies.rtadDescription') }}
-              </dd>
-            </dl>
-            <b-form-checkbox
-              id="rtadSwitch"
-              v-model="rtadState"
-              data-test-id="policies-toggle-rtad"
-              switch
-              @change="changeRtadState"
-            >
-              <span class="sr-only">
-                {{ $t('pagePolicies.rtad') }}
-              </span>
-              <span v-if="rtadState">
-                {{ $t('global.status.enabled') }}
-              </span>
-              <span v-else>{{ $t('global.status.disabled') }}</span>
-            </b-form-checkbox>
-          </b-col>
-        </b-row>
-      </b-col>
-    </b-row>
+    <page-section class="bootstrap-table__section">
+      <b-row>
+        <b-col md="8">
+          <b-row v-if="!modifySSHPolicyDisabled" class="setting-section">
+            <b-col class="d-flex align-items-center justify-content-between">
+              <dl class="mr-3 w-75">
+                <dt>{{ $t('pagePolicies.ssh') }}</dt>
+                <dd>
+                  {{ $t('pagePolicies.sshDescription') }}
+                </dd>
+              </dl>
+              <b-form-checkbox
+                id="sshSwitch"
+                v-model="sshProtocolState"
+                data-test-id="policies-toggle-bmcShell"
+                switch
+                @change="changeSshProtocolState"
+              >
+                <span class="sr-only">
+                  {{ $t('pagePolicies.ssh') }}
+                </span>
+                <span v-if="sshProtocolState">
+                  {{ $t('global.status.enabled') }}
+                </span>
+                <span v-else>{{ $t('global.status.disabled') }}</span>
+              </b-form-checkbox>
+            </b-col>
+          </b-row>
+          <b-row class="setting-section">
+            <b-col class="d-flex align-items-center justify-content-between">
+              <dl class="mt-3 mr-3 w-75">
+                <dt>{{ $t('pagePolicies.ipmi') }}</dt>
+                <dd>
+                  {{ $t('pagePolicies.ipmiDescription') }}
+                </dd>
+              </dl>
+              <b-form-checkbox
+                id="ipmiSwitch"
+                v-model="ipmiProtocolState"
+                data-test-id="polices-toggle-networkIpmi"
+                switch
+                @change="changeIpmiProtocolState"
+              >
+                <span class="sr-only">
+                  {{ $t('pagePolicies.ipmi') }}
+                </span>
+                <span v-if="ipmiProtocolState">
+                  {{ $t('global.status.enabled') }}
+                </span>
+                <span v-else>{{ $t('global.status.disabled') }}</span>
+              </b-form-checkbox>
+            </b-col>
+          </b-row>
+          <b-row class="setting-section">
+            <b-col class="d-flex align-items-center justify-content-between">
+              <dl class="mt-3 mr-3 w-75">
+                <dt>{{ $t('pagePolicies.vtpm') }}</dt>
+                <dd>
+                  {{ $t('pagePolicies.vtpmDescription') }}
+                </dd>
+              </dl>
+              <b-form-checkbox
+                id="vtpmSwitch"
+                v-model="vtpmState"
+                data-test-id="policies-toggle-vtpm"
+                switch
+                @change="changeVtpmState"
+              >
+                <span class="sr-only">
+                  {{ $t('pagePolicies.vtpm') }}
+                </span>
+                <span v-if="vtpmState">
+                  {{ $t('global.status.enabled') }}
+                </span>
+                <span v-else>{{ $t('global.status.disabled') }}</span>
+              </b-form-checkbox>
+            </b-col>
+          </b-row>
+          <b-row class="setting-section">
+            <b-col class="d-flex align-items-center justify-content-between">
+              <dl class="mt-3 mr-3 w-75">
+                <dt>{{ $t('pagePolicies.rtad') }}</dt>
+                <dd>
+                  {{ $t('pagePolicies.rtadDescription') }}
+                </dd>
+              </dl>
+              <b-form-checkbox
+                id="rtadSwitch"
+                v-model="rtadState"
+                data-test-id="policies-toggle-rtad"
+                switch
+                @change="changeRtadState"
+              >
+                <span class="sr-only">
+                  {{ $t('pagePolicies.rtad') }}
+                </span>
+                <span v-if="rtadState">
+                  {{ $t('global.status.enabled') }}
+                </span>
+                <span v-else>{{ $t('global.status.disabled') }}</span>
+              </b-form-checkbox>
+            </b-col>
+          </b-row>
+        </b-col>
+      </b-row>
+    </page-section>
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
 
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 
 export default {
   name: 'Policies',
-  components: { PageTitle },
+  components: { PageTitle, PageSection },
   mixins: [LoadingBarMixin, BVToastMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();