Fix styles

src/lang/en.js

@@ -189,7 +189,8 @@ export default {
     sandbox: 'Force posts to be followers-only',
     disableRemoteSubscription: 'Disallow following user from remote instances',
     disableAnySubscription: 'Disallow following user at all',
-    selectUsers: 'Select users to apply actions to multiple users'
+    selectUsers: 'Select users to apply actions to multiple users',
+    moderateUsers: 'Moderate multiple users'
   },
   usersFilter: {
     inputPlaceholder: 'Select filter',

src/views/users/components/DropdownActionsMenu.vue

@@ -1,6 +1,14 @@
 <template>
-  <el-dropdown size="small" trigger="click">
-    <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
+  <el-dropdown size="small" trigger="click" placement="bottom-start">
+    <el-button v-if="isDesktop" class="actions-button">
+      <span class="actions-button-container">
+        <span>
+          <i class="el-icon-edit" />
+          {{ $t('users.moderateUsers') }}
+        </span>
+        <i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+    </el-button>
     <el-dropdown-menu v-if="showDropdownForMultipleUsers" slot="dropdown">
       <el-dropdown-item
         @click.native="grantRightToMultipleUsers('admin')">
@@ -220,7 +228,20 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss' scoped>
   .actions-button {
-    margin-left: 15px;
+    text-align: left;
+    margin: 0 15px 10px 0;
+    width: 350px;
+    padding: 10px 15px;
+  }
+  .actions-button-container {
+    display: flex;
+    justify-content: space-between;
+  }
+  .el-dropdown {
+    float: right;
+  }
+  .el-dropdown-menu {
+    margin-right: 15px;
   }
   .tag-container {
     display: flex;

src/views/users/index.vue

@@ -8,7 +8,7 @@
       <users-filter/>
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
-    <dropdown-menu
+    <dropdown-actions-menu
       :selected-users="selectedUsers"
       @apply-action="clearSelection"/>
     <el-table
@@ -137,13 +137,13 @@
 import debounce from 'lodash.debounce'
 import numeral from 'numeral'
 import UsersFilter from './components/UsersFilter'
-import DropdownMenu from './components/DropdownMenu'
+import DropdownActionsMenu from './components/DropdownActionsMenu'
 
 export default {
   name: 'Users',
   components: {
     UsersFilter,
-    DropdownMenu
+    DropdownActionsMenu
   },
   data: function() {
     return {
@@ -265,7 +265,7 @@ export default {
     height: 36px;
     justify-content: space-between;
     align-items: center;
-    margin: 22px 15px 22px 15px
+    margin: 22px 15px 15px 15px
   }
   .user-count {
     color: gray;