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,25 +1,44 @@
 @import '../../../../_variables.scss';
 
-.reports-header .right-side {
+.users-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
-  .search-input-container {
-    padding: 0.8rem;
+  .right-side {
     display: flex;
-    justify-content: center;
     align-items: center;
 
-    .search-input {
-      width: 100%;
-      line-height: 1.125rem;
-      font-size: 1rem;
-      padding: 0.5rem;
-      box-sizing: border-box;
-    }
+    .search-input-container {
+      padding: 0.8rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-    .search-icon {
-      margin-right: 0.3em;
+      .search-input {
+        width: 100%;
+        line-height: 1.125rem;
+        font-size: 1rem;
+        padding: 0.5rem;
+        box-sizing: border-box;
+      }
+
+      .search-icon {
+        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">
-            <ModerationTools :user="user" />
-          </BasicUserCard>
+          <BasicUserCard :user="user" />
+          <ModerationTools :user="user" class="user-moderation" />
         </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"