ASC.People: ProfileAction: fix departments field

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js

@@ -24,10 +24,11 @@ const DepartmentField = React.memo((props) => {
         isDisabled={isDisabled}
         title={addButtonTitle}
         onClick={onAddDepartment}
+        className="department-add-btn"
       />
-      {departments && departments.map((department) => (      
+      {departments && departments.map((department) => (
         <SelectedItem
-          key={`department_${department.id}`}    
+          key={`department_${department.id}`}
           text={department.name}
           onClose={() => { onRemoveDepartment(department.id) }}
           isInline={true}

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js

@@ -19,15 +19,15 @@ const MainContainer = styled.div`
     }
   }
 
-.departments-field {
-  .field-body {
-    display: flex;
-    align-items: center;
+  .departments-field {
+    .department-add-btn {
+      margin: 0 8px 8px 0;
+      float: left;
+    }
+    .department-item {
+      margin: 0 8px 8px 0;
+    }
   }
-  .department-item {
-    margin: 0 0 0 8px;
-  }
-}
 
   @media ${utils.device.tablet} {
     flex-direction: column;

web/ASC.Web.Components/src/components/field-container/index.js

@@ -14,6 +14,7 @@ const horizontalCss = css`
     line-height: 32px;
     margin: 0;
     width: 110px;
+    min-width: 110px;
   }
   .field-body {
     flex-grow: 1;

web/ASC.Web.Components/src/components/selector-add-button/index.js

@@ -8,11 +8,10 @@ const StyledButton = styled.div`
     border: 1px solid #ECEEF1;
     box-sizing: border-box;
     border-radius: 3px;
-    height: 32px;
-    width: 32px;
-    padding: 8px;
-    display: inline-grid;
-    line-height: 32px;
+    height: 34px;
+    width: 34px;
+    padding: 9px;
+    display: inline-block;
     cursor: ${props => !props.isDisabled ? "pointer" : "default"};
 
     &:hover{