Align pagination and moderation buttons

src/components/mod_modal/mod_modal.scss

@@ -41,5 +41,14 @@
       height: inherit;
       overflow-y: hidden;
     }
+
+    .pagination-container {
+      display: flex;
+      justify-content: right;
+
+      .btn {
+        margin-left: 0.6em;
+      }
+    }
   }
 }

src/components/mod_modal/tabs/users_tab/users_tab.scss

@@ -1,6 +1,11 @@
 @import '../../../../_variables.scss';
 
-.reports-header .right-side {
+.users-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .right-side {
     display: flex;
     align-items: center;
 
@@ -22,4 +27,18 @@
         margin-right: 0.3em;
       }
     }
+  }
+}
+
+.users .user {
+  display: flex;
+  flex-direction: row;
+
+  .user-moderation {
+    padding-top: 0.6em;
+  }
+
+  .basic-user-card {
+    width: 0;
+  }
 }

src/components/mod_modal/tabs/users_tab/users_tab.vue

@@ -1,7 +1,7 @@
 <template>
   <div :label="$t('moderation.users.users')">
     <div class="content">
-      <div class="reports-header">
+      <div class="users-header">
         <h2>{{ $t('moderation.users.users') }}</h2>
         <div class="right-side">
           <div class="search-input-container">
@@ -169,9 +169,8 @@
           :key="user.id"
           class="user"
         >
-          <BasicUserCard :user="user">
+          <BasicUserCard :user="user" />
-            <ModerationTools :user="user" />
+          <ModerationTools :user="user" class="user-moderation" />
-          </BasicUserCard>
         </div>
       </div>
     </div>
@@ -180,7 +179,7 @@
       v-if="isActive"
       to="#navigation"
     >
-      <div class="apply-container">
+      <div class="pagination-container">
         <button
           class="btn button-default submit"
           :disabled="page == 1"