From 55a451305ebdf9802a32ae53aca80d37369d9687 Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Wed, 7 Apr 2021 18:12:03 +0300
Subject: [PATCH] feat: CB-792 add gap to user details icons

---
 webapp/packages/core-blocks/src/Table/TableColumnValue.tsx  | 2 +-
 .../src/Administration/Users/UsersTable/User.tsx            | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx b/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx
index ce2fc8542c..78ec1d8413 100644
--- a/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx
@@ -73,7 +73,7 @@ export const TableColumnValue = observer(function TableColumnValue({
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
     >
-      {flex && <td-flex as='div'>{children}</td-flex>}
+      {flex && <td-flex as='div' className={className}>{children}</td-flex>}
       {!flex && children}
     </td>
   );
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/User.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/User.tsx
index a6213ae26c..26ce53883f 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/User.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/User.tsx
@@ -15,6 +15,7 @@ import {
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { useStyles } from '@cloudbeaver/core-theming';
+import { use } from '@reshadow/react';
 
 import { UsersAdministrationService } from '../UsersAdministrationService';
 import { UserEdit } from './UserEdit';
@@ -23,6 +24,9 @@ const styles = css`
   TableColumnValue[expand] {
     cursor: pointer;
   }
+  TableColumnValue[|gap] {
+    gap: 16px;
+  }
 `;
 
 interface Props {
@@ -45,7 +49,7 @@ export const User: React.FC<Props> = observer(function User({ user, selectable }
       </TableColumnValue>
       <TableColumnValue expand>{user.userId}</TableColumnValue>
       <TableColumnValue>{user.grantedRoles.join(', ')}</TableColumnValue>
-      <TableColumnValue flex>
+      <TableColumnValue flex {...use({ gap: true })}>
         <Placeholder container={usersAdministrationService.userDetailsInfoPlaceholder} user={user} />
       </TableColumnValue>
     </TableItem>