diff --git a/frontend/src/business/components/settings/common/AddMember.vue b/frontend/src/business/components/settings/common/AddMember.vue
index 97ba699d87..d5c8f2e699 100644
--- a/frontend/src/business/components/settings/common/AddMember.vue
+++ b/frontend/src/business/components/settings/common/AddMember.vue
@@ -11,22 +11,19 @@
           filterable
           :filter-method="userFilter"
           :popper-append-to-body="false"
-          class="select-width"
+          class="member_select"
           :placeholder="$t('member.please_choose_member')">
           <el-option
             v-for="item in userList"
             :key="item.id"
             :label="item.id"
             :value="item.id">
-            <template>
-              <span class="user-select-left">{{ item.name }} ({{ item.id }})</span>
-              <span class="user-select-right">{{ item.email }}</span>
-            </template>
+            <user-option-item :user="item"/>
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item :label="$t('commons.group')" prop="groupIds">
-        <el-select v-model="form.groupIds" multiple :placeholder="$t('group.please_select_group')" class="select-width">
+        <el-select v-model="form.groupIds" multiple :placeholder="$t('group.please_select_group')" class="group_select">
           <el-option
             v-for="item in form.groups"
             :key="item.id"
@@ -39,7 +36,7 @@
     <template v-slot:footer>
       <div class="dialog-footer">
         <el-button @click="dialogVisible = false" size="medium">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" @click="submitForm('form')" @keydown.enter.native.prevent size="medium">
+        <el-button type="primary" @click="submitForm('form')" size="medium" @keydown.enter.native.prevent>
           {{ $t('commons.confirm') }}
         </el-button>
       </div>
@@ -49,8 +46,11 @@
 
 <script>
 
+import UserOptionItem from "@/business/components/settings/common/UserOptionItem";
+
 export default {
   name: "AddMember",
+  components: {UserOptionItem},
   data() {
     return {
       dialogVisible: false,
@@ -124,17 +124,7 @@ export default {
 </script>
 
 <style scoped>
-.user-select-left {
-  float: left;
-}
-
-.user-select-right {
-  float: right;
-  color: #8492a6;
-  font-size: 13px;
-}
-
-.select-width {
-  width: 85%;
+.member_select, .group_select {
+  display: block;
 }
 </style>
diff --git a/frontend/src/business/components/settings/common/UserOptionItem.vue b/frontend/src/business/components/settings/common/UserOptionItem.vue
new file mode 100644
index 0000000000..12b2985330
--- /dev/null
+++ b/frontend/src/business/components/settings/common/UserOptionItem.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <span class="user-select-left">{{ user.name }} ({{ user.id }})</span>
+    <span class="user-select-right">{{ user.email }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UserOptionItem",
+  props: {
+    user: {
+      type: Object,
+      default() {
+        return {
+          id: "",
+          name: "",
+          email: ""
+        };
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.user-select-left {
+  float: left;
+  display: inline-block;
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-select-left:hover {
+  overflow: visible;
+}
+
+.user-select-right {
+  float: right;
+  color: #8492a6;
+  font-size: 13px;
+}
+</style>
diff --git a/frontend/src/business/components/settings/system/SystemWorkspace.vue b/frontend/src/business/components/settings/system/SystemWorkspace.vue
index 0bc2136bb1..a65f714ad0 100644
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@@ -74,7 +74,7 @@
 
     <!-- dialog of workspace member -->
     <el-dialog :close-on-click-modal="false" :visible.sync="dialogWsMemberVisible" width="70%" :destroy-on-close="true"
-               @close="closeWsMemberDialog" class="dialog-css">
+               @close="closeWsMemberDialog" class="dialog-css" top="15vh">
       <template v-slot:title>
         <ms-table-header :condition.sync="dialogCondition" @create="addMember" @search="dialogSearch"
                          :create-tip="$t('member.create')" :title="$t('commons.member')"/>
@@ -464,7 +464,6 @@ export default {
 }
 
 .member-size {
-  text-decoration: underline;
   cursor: pointer;
 }
 
@@ -484,9 +483,8 @@ export default {
 .form-input{
   width: 80%;
 }
-/*.dialog-css >>> .el-dialog__header {*/
-/*  padding: 0;*/
-/*}*/
-
+.dialog-css >>> .el-dialog__body {
+  padding-top: 0;
+}
 </style>
 
diff --git a/frontend/src/business/components/settings/system/group/GroupMember.vue b/frontend/src/business/components/settings/system/group/GroupMember.vue
index 19a138072b..088468ef29 100644
--- a/frontend/src/business/components/settings/system/group/GroupMember.vue
+++ b/frontend/src/business/components/settings/system/group/GroupMember.vue
@@ -2,8 +2,7 @@
   <div>
     <el-dialog :close-on-click-modal="false" :visible.sync="visible" width="65%" top="15vh"
                :destroy-on-close="true" @close="close" v-loading="result.loading"
-               class="group-member"
-    >
+               class="group-member">
       <template v-slot:title>
         <ms-table-header :condition.sync="condition" @create="addMemberBtn" @search="search"
                          :create-tip="$t('member.create')" :title="$t('commons.member')"/>
@@ -22,16 +21,14 @@
             <el-popover
               placement="top"
               width="250"
-              trigger="click"
-            >
+              trigger="click">
               <div v-loading="sourceResult.loading" style="height: 150px;overflow: auto;">
                 <el-tag
                   v-for="item in groupSource"
                   :key="item.id"
                   :type="item.name"
                   size="small"
-                  style="margin-left: 5px;margin-top: 5px;"
-                >
+                  style="margin-left: 5px;margin-top: 5px;">
                   {{ item.name }}
                 </el-tag>
               </div>
@@ -64,7 +61,7 @@
             multiple
             filterable
             :popper-append-to-body="false"
-            style="width: 90%"
+            class="member_select"
             :disabled="userSelectDisable"
             :placeholder="$t('member.please_choose_member')">
             <el-option
@@ -73,15 +70,14 @@
               :label="item.id"
               :value="item.id">
               <template>
-                <span class="user-select-left">{{ item.name }} ({{ item.id }})</span>
-                <span class="user-select-right">{{ item.email }}</span>
+                <user-option-item :user="item"/>
               </template>
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item :label="typeLabel" v-if="showTypeLabel" prop="sourceIds">
-          <el-select v-model="form.sourceIds" :placeholder="typeLabel" style="width: 90%;" clearable multiple
-                     filterable>
+          <el-select v-model="form.sourceIds" :placeholder="typeLabel" class="other_source_select"
+                     clearable multiple filterable>
             <el-option v-for="item in sourceData" :key="item.id" :label="item.name" :value="item.id"/>
           </el-select>
         </el-form-item>
@@ -103,10 +99,12 @@ import MsTableHeader from "@/business/components/common/components/MsTableHeader
 import MsTablePagination from "@/business/components/common/pagination/TablePagination";
 import {GROUP_PROJECT, GROUP_SYSTEM, GROUP_WORKSPACE} from "@/common/js/constants";
 import MsTableOperator from "@/business/components/common/components/MsTableOperator";
+import UserOptionItem from "@/business/components/settings/common/UserOptionItem";
 
 export default {
   name: "GroupMember",
   components: {
+    UserOptionItem,
     MsTableHeader,
     MsTablePagination,
     MsTableOperator
@@ -287,18 +285,10 @@ export default {
 </script>
 
 <style scoped>
-/*.group-member >>> .el-dialog__header {*/
-/*  padding: 0;*/
-/*}*/
-
-.user-select-left {
-  float: left;
+.member_select, .other_source_select {
+  display: block;
 }
-
-.user-select-right {
-  float: right;
-  margin-right: 18px;
-  color: #8492a6;
-  font-size: 13px;
+.group-member >>> .el-dialog__body {
+  padding-top: 0;
 }
 </style>
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index dfbb9a4792..d3622b5b72 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -367,20 +367,6 @@ export default {
   width: 80%;
 }
 
-.workspace-member-name {
-  float: left;
-}
-
-.workspace-member-email {
-  float: right;
-  color: #8492a6;
-  font-size: 13px;
-}
-
-.input-with-autocomplete {
-  width: 100%;
-}
-
 /deep/ .ms-select-all-fixed th:nth-child(2) .el-icon-arrow-down {
   top: -5px;
 }