Update compliance dashboard UI classes to use GitLab UI

As part of previous compliance dashboard work we've introduced some
non-GitLab UI classes as these didn't exist

Now they've been added we can update the references to use them:

- .d-lg-none => .gl-display-lg-none
- .d-lg-inline-flex => .gl-display-lg-inline-flex
- .d-lg-inline-block => .gl-display-lg-inline-block
- .flex-grow-0 => .gl-flex-grow-0
- .gl-display-grid
- .gl-grid-tpl-rows-auto
- .gl-grid-col-start-1

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/approvers.vue

@@ -61,7 +61,7 @@ export default {
       :collapsed="true"
       :max-visible="$options.PRESENTABLE_APPROVERS_LIMIT"
       :avatar-size="24"
-      class="gl-display-inline-flex d-lg-none gl-ml-3"
+      class="gl-display-inline-flex gl-display-lg-none! gl-ml-3"
       badge-tooltip-prop="name"
     >
       <template #avatar="{ avatar }">
@@ -89,7 +89,7 @@ export default {
       :href="approver.web_url"
       :data-user-id="approver.id"
       :data-name="approver.name"
-      class="gl-display-none d-lg-inline-flex gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
+      class="gl-display-none gl-display-lg-inline-flex! gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
     >
       <gl-avatar
         :src="approver.avatar_url"
@@ -103,7 +103,7 @@ export default {
     <span
       v-if="isApproversOverLimit"
       v-gl-tooltip.top="approversOverLimitString"
-      class="gl-display-none d-lg-inline-block avatar-counter gl-ml-3 gl-px-2 gl-flex-shrink-0 flex-grow-0"
+      class="gl-display-none gl-display-lg-inline-block! avatar-counter gl-ml-3 gl-px-2 gl-flex-shrink-0 gl-flex-grow-0"
       >+ {{ amountOfApproversOverLimit }}</span
     >
   </div>

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/grid.vue

@@ -69,7 +69,7 @@ export default {
 
 <template>
   <div>
-    <div class="dashboard-grid">
+    <div class="dashboard-grid gl-display-grid gl-grid-tpl-rows-auto">
       <grid-column-heading :heading="$options.strings.mergeRequestLabel" />
       <grid-column-heading :heading="$options.strings.approvalStatusLabel" class="gl-text-center" />
       <grid-column-heading :heading="$options.strings.pipelineStatusLabel" class="gl-text-center" />

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/merge_request.vue

@@ -22,7 +22,7 @@ export default {
 
 <template>
   <div
-    class="grid-merge-request gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+    class="grid-merge-request gl-grid-col-start-1 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
     data-testid="merge-request"
   >
     <a :href="mergeRequest.path" class="gl-display-block gl-text-gray-900 gl-font-weight-bold">

ee/app/assets/stylesheets/components/compliance_dashboard/dashboard.scss

@@ -3,12 +3,6 @@
   min-width: 550px;
 
   .dashboard-grid {
-    display: grid;
     grid-template-columns: 1fr auto auto auto;
-    grid-template-rows: auto;
-  }
-
-  .grid-merge-request {
-    grid-column-start: 1;
   }
 }

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/approvers_spec.js.snap

@@ -17,13 +17,13 @@ exports[`MergeRequest component when there are approvers matches snapshot 1`] =
     avatars="[object Object]"
     avatarsize="24"
     badgetooltipprop="name"
-    class="gl-display-inline-flex d-lg-none gl-ml-3"
+    class="gl-display-inline-flex gl-display-lg-none! gl-ml-3"
     collapsed="true"
     maxvisible="2"
   />
    
   <gl-link-stub
-    class="gl-avatar-link gl-display-none d-lg-inline-flex gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
+    class="gl-avatar-link gl-display-none gl-display-lg-inline-flex! gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
     data-name="User 0"
     data-user-id="0"
     href="http://localhost:3000/user-0"

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/grid_spec.js.snap

@@ -3,7 +3,7 @@
 exports[`MergeRequestsGrid component when intialized matches the snapshot 1`] = `
 <div>
   <div
-    class="dashboard-grid"
+    class="dashboard-grid gl-display-grid gl-grid-tpl-rows-auto"
   >
     <grid-column-heading-stub
       heading="Merge Request"

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/merge_request_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`MergeRequest component when there is a merge request matches the snapshot 1`] = `
 <div
-  class="grid-merge-request gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+  class="grid-merge-request gl-grid-col-start-1 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
   data-testid="merge-request"
 >
   <a