feat: CB-792 add gap to user details icons

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>
   );

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>