Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

products/ASC.People/Client/src/components/pages/Home/Section/Body/userContent.js

@@ -25,7 +25,7 @@ const getFormatedGroups = (user, status, selectGroup) => {
     return (
       <Link
         isTextOverflow={true}
-        containerWidth='160px'
+        containerWidth='25%'
         type='action'
         title={temp[0].label}
         fontSize='12px'
@@ -39,7 +39,7 @@ const getFormatedGroups = (user, status, selectGroup) => {
     return (
       <LinkWithDropdown
         isTextOverflow={true}
-        containerWidth='160px'
+        containerWidth='25%'
         title={temp[0].label}
         fontSize='12px'
         fontWeight={400}
@@ -57,9 +57,9 @@ const UserContent = ({ user, history, settings, selectGroup }) => {
   const groups = getFormatedGroups(user, status, selectGroup);
 
   const onUserNameClick = useCallback(
-    (e) => { 
+    (e) => {
       e.preventDefault();
-      history.push(`${settings.homepage}/view/${userName}`) 
+      history.push(`${settings.homepage}/view/${userName}`)
     },
     [history, settings.homepage, userName]
   );
@@ -78,14 +78,24 @@ const UserContent = ({ user, history, settings, selectGroup }) => {
   const sideInfoColor = "#333";
 
   const headDepartmentStyle = {
-    width: '110px'
+    maxWidth: '1fr'
   }
 
   return (
     <RowContent
       sideColor={sideInfoColor}
     >
-      <Link type='page' href={`/products/people/view/${userName}`} title={displayName} fontWeight="bold" onClick={onUserNameClick} fontSize='15px' color={nameColor} isTextOverflow={true}>
+      <Link
+        containerWidth='28%'
+        type='page'
+        href={`/products/people/view/${userName}`}
+        title={displayName}
+        fontWeight="bold"
+        onClick={onUserNameClick}
+        fontSize='15px'
+        color={nameColor}
+        isTextOverflow={true}
+      >
         {displayName}
       </Link>
       <>
@@ -94,22 +104,45 @@ const UserContent = ({ user, history, settings, selectGroup }) => {
       </>
       {title
         ?
-          <Text
-            style={headDepartmentStyle}
-            as="div"
-            color={sideInfoColor}
-            fontSize='12px'
-            fontWeight={600}
-            title={title}
-            truncate={true}
-          >
-            {title}
-          </Text>
-        : <div style={headDepartmentStyle}></div>
+        <Text
+          containerWidth='30%'
+          style={headDepartmentStyle}
+          as="div"
+          color={sideInfoColor}
+          fontSize='12px'
+          fontWeight={600}
+          title={title}
+          truncate={true}
+        >
+          {title}
+        </Text>
+        : <div containerWidth='30%' style={headDepartmentStyle}></div>
       }
       {groups}
-      <Link type='page' title={mobilePhone} fontSize='12px' fontWeight={400} color={sideInfoColor} onClick={onPhoneClick} isTextOverflow={true}>{mobilePhone}</Link>
-      <Link containerWidth='220px' type='page' title={email} fontSize='12px' fontWeight={400} color={sideInfoColor} onClick={onEmailClick} isTextOverflow={true}>{email}</Link>
+      <Link
+        containerWidth='5%'
+        type='page'
+        title={mobilePhone}
+        fontSize='12px'
+        fontWeight={400}
+        color={sideInfoColor}
+        onClick={onPhoneClick}
+        isTextOverflow={true}
+      >
+        {mobilePhone}
+      </Link>
+      <Link
+        containerWidth='15%'
+        type='page'
+        title={email}
+        fontSize='12px'
+        fontWeight={400}
+        color={sideInfoColor}
+        onClick={onEmailClick}
+        isTextOverflow={true}
+      >
+        {email}
+      </Link>
     </RowContent>
   );
 };

web/ASC.Web.Components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-components",
-  "version": "1.0.359",
+  "version": "1.0.360",
   "description": "Ascensio System SIA component library",
   "license": "AGPL-3.0",
   "main": "dist/asc-web-components.js",

web/ASC.Web.Components/src/components/row-content/index.js

@@ -36,7 +36,7 @@ const MainContainerWrapper = styled.div`
   align-self: center;
   margin-right: auto;
   min-width: 140px;
-  width: 48%;
+  width: 28%;
 
   ${props => !props.disableSideInfo && `
     @media ${tablet} {