Fix stylelint rules in boards.scss

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/59895

4 files changed, 16 insertions, 11 deletions

diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue
index 2a0008467c4..091700de93f 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.vue
+++ b/app/assets/javascripts/boards/components/modal/empty_state.vue
@@ -42,8 +42,8 @@ export default {
 </script>
 
 <template>
-  <section class="empty-state">
-    <div class="row">
+  <section class="empty-state d-flex mt-0 h-100">
+    <div class="row w-100 my-auto mx-0">
       <div class="col-12 col-md-6 order-md-last">
         <aside class="svg-content d-none d-md-block"><img :src="emptyStateSvg" /></aside>
       </div>
diff --git a/app/assets/javascripts/boards/components/modal/header.vue b/app/assets/javascripts/boards/components/modal/header.vue
index 1f0961e02d8..1cfa6d39362 100644
--- a/app/assets/javascripts/boards/components/modal/header.vue
+++ b/app/assets/javascripts/boards/components/modal/header.vue
@@ -50,8 +50,8 @@ export default {
 </script>
 <template>
   <div>
-    <header class="add-issues-header form-actions">
-      <h2>
+    <header class="add-issues-header border-top-0 form-actions">
+      <h2 class="m-0">
         Add issues
         <button
           type="button"
@@ -65,7 +65,7 @@ export default {
       </h2>
     </header>
     <modal-tabs v-if="!loading && issuesCount > 0" />
-    <div v-if="showSearch" class="add-issues-search append-bottom-10">
+    <div v-if="showSearch" class="d-flex append-bottom-10">
       <modal-filters :store="filter" />
       <button
         ref="selectAllBtn"
diff --git a/app/assets/javascripts/boards/components/modal/index.vue b/app/assets/javascripts/boards/components/modal/index.vue
index 1e5761cf268..8e09e265cfb 100644
--- a/app/assets/javascripts/boards/components/modal/index.vue
+++ b/app/assets/javascripts/boards/components/modal/index.vue
@@ -143,8 +143,11 @@ export default {
 };
 </script>
 <template>
-  <div v-if="showAddIssuesModal" class="add-issues-modal">
-    <div class="add-issues-container">
+  <div
+    v-if="showAddIssuesModal"
+    class="add-issues-modal d-flex position-fixed position-top-0 position-bottom-0 position-left-0 position-right-0 h-100"
+  >
+    <div class="add-issues-container d-flex flex-column m-auto rounded">
       <modal-header
         :project-id="projectId"
         :milestone-path="milestonePath"
@@ -161,8 +164,10 @@ export default {
         :new-issue-path="newIssuePath"
         :empty-state-svg="emptyStateSvg"
       />
-      <section v-if="loading || filterLoading" class="add-issues-list text-center">
-        <div class="add-issues-list-loading"><gl-loading-icon /></div>
+      <section v-if="loading || filterLoading" class="add-issues-list d-flex h-100 text-center">
+        <div class="add-issues-list-loading w-100 align-self-center">
+          <gl-loading-icon size="md" />
+        </div>
       </section>
       <modal-footer />
     </div>
diff --git a/app/assets/javascripts/boards/components/modal/list.vue b/app/assets/javascripts/boards/components/modal/list.vue
index e9ed2de859d..28d2019af2f 100644
--- a/app/assets/javascripts/boards/components/modal/list.vue
+++ b/app/assets/javascripts/boards/components/modal/list.vue
@@ -117,7 +117,7 @@ export default {
 };
 </script>
 <template>
-  <section ref="list" class="add-issues-list add-issues-list-columns">
+  <section ref="list" class="add-issues-list add-issues-list-columns d-flex h-100">
     <div
       v-if="issuesCount > 0 && issues.length === 0"
       class="empty-state add-issues-empty-state-filter text-center"
@@ -129,7 +129,7 @@ export default {
       <div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent">
         <div
           :class="{ 'is-active': issue.selected }"
-          class="board-card"
+          class="board-card position-relative p-3 rounded"
           @click="toggleIssue($event, issue)"
         >
           <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" />