From bac47d20ce81a47ef4a8ed0da2141d029126c2b8 Mon Sep 17 00:00:00 2001
From: Alexey <wrouds@gmail.com>
Date: Wed, 15 May 2024 00:03:11 +0800
Subject: [PATCH] CB-5070 refactor: forms design (#2607)

* CB-5070 refactor: forms design

* Merge remote-tracking branch 'origin/devel' into refactor/cb-5070/forms-design

* CB-5070 fix: html semantics

* CB-5070 fix: table header styles

* CB-5070 fix: table header styles

---------

Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>
---
 .../core-blocks/src/Containers/Container.tsx  | 11 ++-
 .../core-blocks/src/Containers/Group.m.css    |  4 ++
 .../core-blocks/src/Containers/Group.tsx      |  4 +-
 .../core-blocks/src/Table/TableHeader.m.css   |  8 +++
 .../Administration/Users/Teams/CreateTeam.tsx | 10 +--
 .../GrantedConnections/ConnectionList.m.css   | 35 +++-------
 .../GrantedConnections/ConnectionList.tsx     | 65 +++++++++---------
 .../GrantedConnections/GrantedConnections.tsx |  5 +-
 .../GrantedConnectionsList.m.css              | 37 ++++------
 .../GrantedConnectionsList.tsx                | 65 +++++++++---------
 .../GrantedConnectionsTableHeader.m.css       | 24 +++----
 .../GrantedConnectionsTableHeader.tsx         |  8 +--
 .../Teams/GrantedUsers/GrantedUserList.m.css  | 36 ++++------
 .../Teams/GrantedUsers/GrantedUserList.tsx    | 59 ++++++++--------
 .../Users/Teams/GrantedUsers/GrantedUsers.tsx |  9 ++-
 .../GrantedUsersTableHeader.m.css             | 23 +++----
 .../GrantedUsersTableHeader.tsx               |  8 +--
 .../Users/Teams/GrantedUsers/UserList.m.css   | 29 +++-----
 .../Users/Teams/GrantedUsers/UserList.tsx     | 62 ++++++++---------
 .../Users/Teams/Options/TeamOptions.tsx       |  6 +-
 .../Administration/Users/Teams/TeamForm.m.css | 68 +++----------------
 .../Administration/Users/Teams/TeamForm.tsx   | 48 +++++++------
 .../Users/Teams/TeamsTable/TeamEdit.m.css     | 13 ++--
 .../Users/Teams/TeamsTable/TeamEdit.tsx       |  6 +-
 .../UserForm/AdministrationUserForm.m.css     | 28 ++------
 .../Users/UserForm/AdministrationUserForm.tsx | 15 ++--
 .../UserFormConnectionAccess.tsx              | 12 ++--
 .../UserFormConnectionAccessPanel.tsx         | 10 ++-
 .../Users/UserForm/Info/UserFormInfo.tsx      | 38 ++++-------
 .../Origin/UserFormOriginInfoPanel.tsx        | 21 +++---
 .../Users/UsersTable/CreateUser.tsx           | 15 ++--
 .../Users/UsersTable/UserEdit.m.css           |  5 --
 .../Users/UsersTable/UserEdit.tsx             |  6 +-
 .../ConnectionAccessTableHeader.tsx           |  4 +-
 .../TableViewer/TableHeader/TableHeader.tsx   |  4 +-
 35 files changed, 341 insertions(+), 460 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Containers/Container.tsx b/webapp/packages/core-blocks/src/Containers/Container.tsx
index af6ebe228b..f6e4c5b4e1 100644
--- a/webapp/packages/core-blocks/src/Containers/Container.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Container.tsx
@@ -14,16 +14,21 @@ import { filterContainerFakeProps, getContainerProps } from './filterContainerFa
 import type { IContainerProps } from './IContainerProps';
 import elementsSizeStyle from './shared/ElementsSize.m.css';
 
-export const Container = forwardRef<HTMLDivElement, IContainerProps & React.HTMLAttributes<HTMLDivElement>>(function Container(
-  { className, ...rest },
+interface Props {
+  as?: 'div' | 'header' | 'footer' | 'section' | 'aside' | 'main' | 'nav';
+}
+
+export const Container = forwardRef<HTMLDivElement, Props & IContainerProps & React.HTMLAttributes<HTMLDivElement>>(function Container(
+  { as = 'div', className, ...rest },
   ref,
 ) {
   const styles = useS(style, elementsSizeStyle);
   const divProps = filterContainerFakeProps(rest);
   const containerProps = getContainerProps(rest);
+  const Element = as;
 
   return (
-    <div
+    <Element
       ref={ref}
       {...divProps}
       className={s(
diff --git a/webapp/packages/core-blocks/src/Containers/Group.m.css b/webapp/packages/core-blocks/src/Containers/Group.m.css
index 94ebaf14c3..50d599e7f5 100644
--- a/webapp/packages/core-blocks/src/Containers/Group.m.css
+++ b/webapp/packages/core-blocks/src/Containers/Group.m.css
@@ -12,6 +12,10 @@
 .surface {
   composes: theme-background-surface theme-text-on-surface from global;
 }
+.border {
+  composes: theme-border-color-background from global;
+  border: 1px solid;
+}
 .group {
   align-content: baseline;
   box-sizing: border-box;
diff --git a/webapp/packages/core-blocks/src/Containers/Group.tsx b/webapp/packages/core-blocks/src/Containers/Group.tsx
index 94927d58bb..cda463b627 100644
--- a/webapp/packages/core-blocks/src/Containers/Group.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Group.tsx
@@ -20,12 +20,13 @@ interface Props extends IContainerProps {
   secondary?: boolean;
   center?: boolean;
   box?: boolean;
+  border?: boolean;
   hideOverflow?: boolean;
   boxNoOverflow?: boolean;
 }
 
 export const Group = forwardRef<HTMLDivElement, Props & React.HTMLAttributes<HTMLDivElement>>(function Group(
-  { form, center, box, secondary, boxNoOverflow, hideOverflow, className, ...rest },
+  { form, center, box, border, secondary, boxNoOverflow, hideOverflow, className, ...rest },
   ref,
 ) {
   const styles = useS(style, containerStyles, elementsSizeStyles);
@@ -51,6 +52,7 @@ export const Group = forwardRef<HTMLDivElement, Props & React.HTMLAttributes<HTM
           boxNoOverflow,
           hideOverflow,
           box,
+          border,
         },
         className,
       )}
diff --git a/webapp/packages/core-blocks/src/Table/TableHeader.m.css b/webapp/packages/core-blocks/src/Table/TableHeader.m.css
index 923a3b1ab0..2fc9afe13f 100644
--- a/webapp/packages/core-blocks/src/Table/TableHeader.m.css
+++ b/webapp/packages/core-blocks/src/Table/TableHeader.m.css
@@ -1,7 +1,15 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 .tableHeader.fixed {
   background: var(--theme-surface);
   position: sticky;
   top: 0;
+  /* TODO: place TableHeader after TableBody and remove z-index */
   z-index: 1;
 
   & > tr {
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/CreateTeam.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/CreateTeam.tsx
index 2cfd10dfc0..96d34d0079 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/CreateTeam.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/CreateTeam.tsx
@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { Container, Group, GroupTitle, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, Group, GroupTitle, Loader, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
 import style from './CreateTeam.m.css';
@@ -24,12 +24,14 @@ export const CreateTeam: React.FC = observer(function CreateTeam() {
   }
 
   return (
-    <Group aria-label={translate('administration_teams_team_creation')} className={s(styles, { box: true })} box boxNoOverflow vertical noWrap>
+    <Group aria-label={translate('administration_teams_team_creation')} className={s(styles, { box: true })} gap vertical noWrap>
       <GroupTitle header keepSize>
         <Translate token="administration_teams_team_creation" />
       </GroupTitle>
-      <Container overflow>
-        <TeamForm state={service.data} onCancel={service.cancelCreate} onSave={service.cancelCreate} />
+      <Container overflow vertical>
+        <Loader suspense>
+          <TeamForm state={service.data} onCancel={service.cancelCreate} onSave={service.cancelCreate} />
+        </Loader>
       </Container>
     </Group>
   );
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.m.css
index 08b446ef0f..b808a2abc2 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.m.css
@@ -1,28 +1,15 @@
-.group {
-  position: relative;
-}
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 
-.group,
-.container,
-.tableContainer {
+.group {
   height: 100%;
-}
 
-.container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+  & .header {
+    flex: 0 0 auto;
+  }
 }
-
-.tableContainer {
-  overflow: auto;
-}
-
-.grantedConnectionsTableHeader {
-  flex: 0 0 auto;
-}
-
-.table {
-  composes: theme-background-surface theme-text-on-surface from global;
-  width: 100%;
-}
\ No newline at end of file
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.tsx
index 0759eeca36..aa5967b97d 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.tsx
@@ -11,6 +11,7 @@ import { useCallback, useState } from 'react';
 
 import {
   Button,
+  Container,
   getComputed,
   getSelectedItems,
   Group,
@@ -26,11 +27,11 @@ import {
 import { Connection, DBDriverResource } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 
+import styles from './ConnectionList.m.css';
 import { getFilteredConnections } from './getFilteredConnections';
 import { GrantedConnectionsTableHeader, IFilterState } from './GrantedConnectionsTableHeader/GrantedConnectionsTableHeader';
 import { GrantedConnectionsTableInnerHeader } from './GrantedConnectionsTableHeader/GrantedConnectionsTableInnerHeader';
 import { GrantedConnectionsTableItem } from './GrantedConnectionsTableItem';
-import styles from './ConnectionList.m.css';
 
 interface Props {
   connectionList: Connection[];
@@ -60,40 +61,40 @@ export const ConnectionList = observer<Props>(function ConnectionList({ connecti
   const keys = connections.map(connection => connection.id);
 
   return (
-    <Group className={s(style, { group: true })} box medium overflow>
-      <div className={s(style, { container: true })}>
-        <GrantedConnectionsTableHeader filterState={filterState} disabled={disabled}>
+    <Group className={s(style, { group: true })} box border medium overflow vertical>
+      <GrantedConnectionsTableHeader filterState={filterState} disabled={disabled}>
+        <Container keepSize>
           <Button disabled={disabled || !selected} mod={['unelevated']} onClick={grant}>
             {translate('ui_add')}
           </Button>
-        </GrantedConnectionsTableHeader>
-        <div className={s(style, { tableContainer: true })}>
-          <Table className={s(style, { table: true })} keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => !grantedSubjects.includes(item)} size="big">
-            <GrantedConnectionsTableInnerHeader className={s(style, { grantedConnectionsTableHeader: true })} disabled={disabled} />
-            <TableBody>
-              {!connections.length && filterState.filterValue && (
-                <TableItem item="tableInfo" selectDisabled>
-                  <TableColumnValue colSpan={5}>{translate('ui_search_no_result_placeholder')}</TableColumnValue>
-                </TableItem>
-              )}
-              {connections.map(connection => {
-                const driver = driversResource.get(connection.driverId);
-                return (
-                  <GrantedConnectionsTableItem
-                    key={connection.id}
-                    id={connection.id}
-                    name={connection.name}
-                    tooltip={connection.name}
-                    host={`${connection.host || ''}${connection.host && connection.port ? ':' + connection.port : ''}`}
-                    icon={driver?.icon}
-                    disabled={disabled}
-                  />
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
+        </Container>
+      </GrantedConnectionsTableHeader>
+      <Container overflow>
+        <Table keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => !grantedSubjects.includes(item)}>
+          <GrantedConnectionsTableInnerHeader className={s(style, { header: true })} disabled={disabled} />
+          <TableBody>
+            {!connections.length && filterState.filterValue && (
+              <TableItem item="tableInfo" selectDisabled>
+                <TableColumnValue colSpan={5}>{translate('ui_search_no_result_placeholder')}</TableColumnValue>
+              </TableItem>
+            )}
+            {connections.map(connection => {
+              const driver = driversResource.get(connection.driverId);
+              return (
+                <GrantedConnectionsTableItem
+                  key={connection.id}
+                  id={connection.id}
+                  name={connection.name}
+                  tooltip={connection.name}
+                  host={`${connection.host || ''}${connection.host && connection.port ? ':' + connection.port : ''}`}
+                  icon={driver?.icon}
+                  disabled={disabled}
+                />
+              );
+            })}
+          </TableBody>
+        </Table>
+      </Container>
     </Group>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnections.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnections.tsx
index 0d0f10edee..364000c718 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnections.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnections.tsx
@@ -8,7 +8,6 @@
 import { observer } from 'mobx-react-lite';
 
 import {
-  ColoredContainer,
   Container,
   getComputed,
   Group,
@@ -76,7 +75,7 @@ export const GrantedConnections: TabContainerPanelComponent<ITeamFormProps> = ob
   return (
     <Loader className={s(styles, { loader: true })} state={[state.state]}>
       {() => (
-        <ColoredContainer className={s(styles, { box: true })} parent gap vertical>
+        <Container className={s(styles, { box: true })} parent gap vertical>
           {!connections.length ? (
             <Group className={s(styles, { placeholderBox: true })} large>
               <TextPlaceholder>{translate('administration_teams_team_granted_connections_empty')}</TextPlaceholder>
@@ -102,7 +101,7 @@ export const GrantedConnections: TabContainerPanelComponent<ITeamFormProps> = ob
               </Container>
             </>
           )}
-        </ColoredContainer>
+        </Container>
       )}
     </Loader>
   );
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.m.css
index 5671a83df0..b808a2abc2 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.m.css
@@ -1,28 +1,15 @@
-.box {
-  position: relative;
-}
-
-.box,
-.innerBox,
-.tableBox {
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.group {
   height: 100%;
-}
-
-.innerBox {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.header {
-  flex: 0 0 auto;
-}
-
-.tableBox {
-  overflow: auto;
-}
 
-.table {
-  composes: theme-background-surface theme-text-on-surface from global;
-  width: 100%;
+  & .header {
+    flex: 0 0 auto;
+  }
 }
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.tsx
index 0432ca14b6..d9db50eaed 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.tsx
@@ -11,6 +11,7 @@ import { useCallback, useState } from 'react';
 
 import {
   Button,
+  Container,
   getComputed,
   getSelectedItems,
   Group,
@@ -70,43 +71,45 @@ export const GrantedConnectionList = observer<Props>(function GrantedConnectionL
   }
 
   return (
-    <Group className={s(styles, { box: true })} box medium overflow>
-      <div className={s(styles, { innerBox: true })}>
-        <GrantedConnectionsTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
+    <Group className={s(styles, { group: true })} box border medium overflow vertical>
+      <GrantedConnectionsTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
+        <Container keepSize>
           <Button disabled={disabled || !selected} mod={['outlined']} onClick={revoke}>
             {translate('ui_delete')}
           </Button>
+        </Container>
+        <Container keepSize>
           <Button disabled={disabled} mod={['unelevated']} onClick={props.onEdit}>
             {translate('ui_edit')}
           </Button>
-        </GrantedConnectionsTableHeader>
-        <div className={s(styles, { tableBox: true })}>
-          <Table className={s(styles, { table: true })} keys={keys} selectedItems={selectedSubjects} size="big">
-            <GrantedConnectionsTableInnerHeader disabled={disabled} />
-            <TableBody>
-              {tableInfoText && (
-                <TableItem item="tableInfo" selectDisabled>
-                  <TableColumnValue colSpan={5}>{translate(tableInfoText)}</TableColumnValue>
-                </TableItem>
-              )}
-              {connections.map(connection => {
-                const driver = driversResource.get(connection.driverId);
-                return (
-                  <GrantedConnectionsTableItem
-                    key={connection.id}
-                    id={connection.id}
-                    name={connection.name}
-                    tooltip={connection.name}
-                    host={`${connection.host || ''}${connection.port ? ':' + connection.port : ''}`}
-                    icon={driver?.icon}
-                    disabled={disabled}
-                  />
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
+        </Container>
+      </GrantedConnectionsTableHeader>
+      <Container overflow>
+        <Table keys={keys} selectedItems={selectedSubjects}>
+          <GrantedConnectionsTableInnerHeader disabled={disabled} />
+          <TableBody>
+            {tableInfoText && (
+              <TableItem item="tableInfo" selectDisabled>
+                <TableColumnValue colSpan={5}>{translate(tableInfoText)}</TableColumnValue>
+              </TableItem>
+            )}
+            {connections.map(connection => {
+              const driver = driversResource.get(connection.driverId);
+              return (
+                <GrantedConnectionsTableItem
+                  key={connection.id}
+                  id={connection.id}
+                  name={connection.name}
+                  tooltip={connection.name}
+                  host={`${connection.host || ''}${connection.port ? ':' + connection.port : ''}`}
+                  icon={driver?.icon}
+                  disabled={disabled}
+                />
+              );
+            })}
+          </TableBody>
+        </Table>
+      </Container>
     </Group>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.m.css
index 9756fef33f..d1ca9b666b 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.m.css
@@ -1,18 +1,12 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 .header {
-  composes: theme-border-color-background theme-background-surface theme-text-on-surface from global;
-  overflow: hidden;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  gap: 16px;
+  composes: theme-border-color-background from global;
   border-bottom: 1px solid;
-}
-
-.buttons {
-  display: flex;
-  gap: 16px;
+  flex-shrink: 0;
 }
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx
index f3a0e88a92..19ec3f71a7 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx
@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { Filter, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, Filter, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 
 import style from './GrantedConnectionsTableHeader.m.css';
 
@@ -26,14 +26,14 @@ export const GrantedConnectionsTableHeader = observer<Props>(function GrantedCon
   const translate = useTranslate();
 
   return (
-    <header className={s(styles, { header: true }, className)}>
+    <Container as="header" className={s(styles, { header: true }, className)} noWrap parent compact gap keepSize>
       <Filter
         disabled={disabled}
         placeholder={translate('administration_teams_team_granted_connections_search_placeholder')}
         name="filterValue"
         state={filterState}
       />
-      <div className={s(styles, { buttons: true })}>{children}</div>
-    </header>
+      {children}
+    </Container>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.m.css
index 202675a708..b808a2abc2 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.m.css
@@ -1,27 +1,15 @@
-.box {
-  position: relative;
-}
-
-.box,
-.innerBox,
-.tableBox {
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.group {
   height: 100%;
-}
-
-.innerBox {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.header {
-  flex: 0 0 auto;
-}
-
-.tableBox {
-  overflow: auto;
-}
 
-.table {
-  composes: theme-background-surface theme-text-on-surface from global;
+  & .header {
+    flex: 0 0 auto;
+  }
 }
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.tsx
index af186ae5e1..85a150b35d 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.tsx
@@ -12,6 +12,7 @@ import { useCallback, useState } from 'react';
 import { UsersResource } from '@cloudbeaver/core-authentication';
 import {
   Button,
+  Container,
   getComputed,
   getSelectedItems,
   Group,
@@ -81,40 +82,42 @@ export const GrantedUserList = observer<Props>(function GrantedUserList({ grante
   }
 
   return (
-    <Group className={s(styles, { box: true })} box medium overflow>
-      <div className={s(styles, { innerBox: true })}>
-        <GrantedUsersTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
+    <Group className={s(styles, { group: true })} box border medium overflow vertical>
+      <GrantedUsersTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
+        <Container keepSize>
           <Button disabled={disabled || !selected} mod={['outlined']} onClick={revoke}>
             {translate('ui_delete')}
           </Button>
+        </Container>
+        <Container keepSize>
           <Button disabled={disabled} mod={['unelevated']} onClick={props.onEdit}>
             {translate('ui_edit')}
           </Button>
-        </GrantedUsersTableHeader>
-        <div className={s(styles, { tableBox: true })}>
-          <Table className={s(styles, { table: true })} keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => isEditable(item)}>
-            <GrantedUsersTableInnerHeader disabled={disabled} />
-            <TableBody>
-              {tableInfoText && (
-                <TableItem item="tableInfo" selectDisabled>
-                  <TableColumnValue colSpan={5}>{translate(tableInfoText)}</TableColumnValue>
-                </TableItem>
-              )}
-              {users.map(user => (
-                <GrantedUsersTableItem
-                  key={user.userId}
-                  id={user.userId}
-                  name={`${user.userId}${usersResource.isActiveUser(user.userId) ? ` (${translate('ui_you')})` : ''}`}
-                  tooltip={isEditable(user.userId) ? user.userId : translate('administration_teams_team_granted_users_permission_denied')}
-                  icon="/icons/user.svg"
-                  iconTooltip={translate('authentication_user_icon_tooltip')}
-                  disabled={disabled}
-                />
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
+        </Container>
+      </GrantedUsersTableHeader>
+      <Container overflow>
+        <Table keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => isEditable(item)}>
+          <GrantedUsersTableInnerHeader disabled={disabled} />
+          <TableBody>
+            {tableInfoText && (
+              <TableItem item="tableInfo" selectDisabled>
+                <TableColumnValue colSpan={5}>{translate(tableInfoText)}</TableColumnValue>
+              </TableItem>
+            )}
+            {users.map(user => (
+              <GrantedUsersTableItem
+                key={user.userId}
+                id={user.userId}
+                name={`${user.userId}${usersResource.isActiveUser(user.userId) ? ` (${translate('ui_you')})` : ''}`}
+                tooltip={isEditable(user.userId) ? user.userId : translate('administration_teams_team_granted_users_permission_denied')}
+                icon="/icons/user.svg"
+                iconTooltip={translate('authentication_user_icon_tooltip')}
+                disabled={disabled}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </Container>
     </Group>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsers.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsers.tsx
index 4977c9cb6e..f1fe31856d 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsers.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsers.tsx
@@ -9,7 +9,6 @@ import { observer } from 'mobx-react-lite';
 
 import { AdminUser, UsersResource, UsersResourceFilterKey } from '@cloudbeaver/core-authentication';
 import {
-  ColoredContainer,
   Container,
   getComputed,
   Group,
@@ -58,18 +57,18 @@ export const GrantedUsers: TabContainerPanelComponent<ITeamFormProps> = observer
 
   if (isDefaultTeam) {
     return (
-      <ColoredContainer className={s(styles, { box: true })} parent gap vertical>
+      <Container className={s(styles, { box: true })} parent gap vertical>
         <Group className={s(styles, { placeholderBox: true })} keepSize large>
           <TextPlaceholder>{translate('plugin_authentication_administration_team_default_users_tooltip')}</TextPlaceholder>
         </Group>
-      </ColoredContainer>
+      </Container>
     );
   }
 
   return (
     <Loader className={s(styles, { loader: true })} state={[state.state]}>
       {() => (
-        <ColoredContainer className={s(styles, { box: true })} parent gap vertical>
+        <Container className={s(styles, { box: true })} parent gap vertical>
           {!users.resource.values.length ? (
             <Group className={s(styles, { placeholderBox: true })} keepSize large>
               <TextPlaceholder>{translate('administration_teams_team_granted_users_empty')}</TextPlaceholder>
@@ -90,7 +89,7 @@ export const GrantedUsers: TabContainerPanelComponent<ITeamFormProps> = observer
               </Container>
             </>
           )}
-        </ColoredContainer>
+        </Container>
       )}
     </Loader>
   );
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.m.css
index 9756fef33f..55d3274892 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.m.css
@@ -1,18 +1,11 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 .header {
-  composes: theme-border-color-background theme-background-surface theme-text-on-surface from global;
-  overflow: hidden;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  gap: 16px;
+  composes: theme-border-color-background from global;
   border-bottom: 1px solid;
 }
-
-.buttons {
-  display: flex;
-  gap: 16px;
-}
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx
index d9cdb396bb..2186d30bca 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx
@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { Filter, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, Filter, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 
 import style from './GrantedUsersTableHeader.m.css';
 
@@ -26,14 +26,14 @@ export const GrantedUsersTableHeader = observer<Props>(function GrantedUsersTabl
   const translate = useTranslate();
 
   return (
-    <header className={s(styles, { header: true }, className)}>
+    <Container as="header" className={s(styles, { header: true }, className)} gap parent compact noWrap>
       <Filter
         disabled={disabled}
         placeholder={translate('administration_teams_team_granted_users_search_placeholder')}
         name="filterValue"
         state={filterState}
       />
-      <div className={s(styles, { buttons: true })}>{children}</div>
-    </header>
+      {children}
+    </Container>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.m.css
index 202675a708..692f3ead06 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.m.css
@@ -1,27 +1,14 @@
-.box {
-  position: relative;
-}
-
-.box,
-.innerBox,
-.tableBox {
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+.group {
   height: 100%;
 }
 
-.innerBox {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
 .header {
   flex: 0 0 auto;
 }
-
-.tableBox {
-  overflow: auto;
-}
-
-.table {
-  composes: theme-background-surface theme-text-on-surface from global;
-}
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.tsx
index 21cb1e9bbf..85005f1a1f 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.tsx
@@ -12,6 +12,7 @@ import { useCallback, useState } from 'react';
 import { UsersResource } from '@cloudbeaver/core-authentication';
 import {
   Button,
+  Container,
   getComputed,
   getSelectedItems,
   Group,
@@ -71,42 +72,37 @@ export const UserList = observer<Props>(function UserList({ userList, grantedUse
   }
 
   return (
-    <Group className={s(styles, { box: true })} box medium overflow>
-      <div className={s(styles, { innerBox: true })}>
-        <GrantedUsersTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
+    <Group className={s(styles, { group: true })} border box medium overflow vertical>
+      <GrantedUsersTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
+        <Container keepSize>
           <Button disabled={disabled || !selected} mod={['unelevated']} onClick={grant}>
             {translate('ui_add')}
           </Button>
-        </GrantedUsersTableHeader>
-        <div className={s(styles, { tableBox: true })}>
-          <Table
-            className={s(styles, { table: true })}
-            keys={keys}
-            selectedItems={selectedSubjects}
-            isItemSelectable={item => isEditable(item) && !grantedUsers.includes(item)}
-          >
-            <GrantedUsersTableInnerHeader disabled={disabled} />
-            <TableBody>
-              {!users.length && filterState.filterValue && (
-                <TableItem item="tableInfo" selectDisabled>
-                  <TableColumnValue colSpan={5}>{translate('ui_search_no_result_placeholder')}</TableColumnValue>
-                </TableItem>
-              )}
-              {users.map(user => (
-                <GrantedUsersTableItem
-                  key={user.userId}
-                  id={user.userId}
-                  name={`${user.userId}${usersResource.isActiveUser(user.userId) ? ` (${translate('ui_you')})` : ''}`}
-                  tooltip={isEditable(user.userId) ? user.userId : translate('administration_teams_team_granted_users_permission_denied')}
-                  icon="/icons/user.svg"
-                  iconTooltip={translate('authentication_user_icon_tooltip')}
-                  disabled={disabled}
-                />
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
+        </Container>
+      </GrantedUsersTableHeader>
+      <Container overflow>
+        <Table keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => isEditable(item) && !grantedUsers.includes(item)}>
+          <GrantedUsersTableInnerHeader disabled={disabled} />
+          <TableBody>
+            {!users.length && filterState.filterValue && (
+              <TableItem item="tableInfo" selectDisabled>
+                <TableColumnValue colSpan={5}>{translate('ui_search_no_result_placeholder')}</TableColumnValue>
+              </TableItem>
+            )}
+            {users.map(user => (
+              <GrantedUsersTableItem
+                key={user.userId}
+                id={user.userId}
+                name={`${user.userId}${usersResource.isActiveUser(user.userId) ? ` (${translate('ui_you')})` : ''}`}
+                tooltip={isEditable(user.userId) ? user.userId : translate('administration_teams_team_granted_users_permission_denied')}
+                icon="/icons/user.svg"
+                iconTooltip={translate('authentication_user_icon_tooltip')}
+                disabled={disabled}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </Container>
     </Group>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx
index 3d1ed36a6a..7103c0cd59 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx
@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { ColoredContainer, Group, InputField, Textarea, useResource, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, Group, InputField, Textarea, useResource, useTranslate } from '@cloudbeaver/core-blocks';
 import { ServerConfigResource } from '@cloudbeaver/core-root';
 import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui';
 
@@ -21,7 +21,7 @@ export const TeamOptions: TabContainerPanelComponent<ITeamFormProps> = observer(
   const edit = state.mode === 'edit';
 
   return (
-    <ColoredContainer parent gap overflow>
+    <Container>
       <Group small gap>
         <InputField name="teamId" state={state.config} readOnly={state.readonly || edit} disabled={state.disabled} required tiny fill>
           {translate('administration_teams_team_id')}
@@ -35,6 +35,6 @@ export const TeamOptions: TabContainerPanelComponent<ITeamFormProps> = observer(
       </Group>
       {!serverConfigResource.resource.distributed && <Permissions state={state} />}
       <TeamMetaParameters state={state} />
-    </ColoredContainer>
+    </Container>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.m.css
index d1fdd531ef..b9090587dd 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.m.css
@@ -1,17 +1,14 @@
-.form {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: auto;
-}
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 
 .topBar {
-  composes: theme-border-color-background theme-background-secondary theme-text-on-secondary from global;
-  position: relative;
-  display: flex;
-  padding-top: 16px;
+  composes: theme-border-color-background from global;
+  margin-bottom: 16px;
 }
 
 .topBar:before {
@@ -22,50 +19,3 @@
   border-bottom: solid 2px;
   border-color: inherit;
 }
-
-.topBarTabs {
-  flex: 1;
-}
-
-.topBarActions {
-  display: flex;
-  align-items: center;
-  padding: 0 24px;
-  gap: 16px;
-}
-
-.statusMessage {
-  composes: theme-typography--caption from global;
-  height: 24px;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.statusMessage .iconOrImage {
-  height: 24px;
-  width: 24px;
-}
-
-.box {
-  composes: theme-background-secondary theme-text-on-secondary from global;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100%;
-  overflow: auto;
-}
-.content {
-  composes: theme-background-secondary theme-border-color-background from global;
-  position: relative;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: auto;
-}
-.tabList {
-  position: relative;
-  flex-shrink: 0;
-  align-items: center;
-}
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.tsx
index e538ae5f75..88c57fc443 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.tsx
@@ -9,8 +9,21 @@ import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
 
 import type { TeamInfo } from '@cloudbeaver/core-authentication';
-import { Form, IconOrImage, Loader, Placeholder, s, useExecutor, useForm, useObjectRef, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import {
+  Container,
+  Form,
+  Loader,
+  Placeholder,
+  s,
+  StatusMessage,
+  useExecutor,
+  useForm,
+  useObjectRef,
+  useS,
+  useTranslate,
+} from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
+import { ENotificationType } from '@cloudbeaver/core-events';
 import { TabList, TabPanelList, TabsState } from '@cloudbeaver/core-ui';
 
 import { teamContext } from './Contexts/teamContext';
@@ -58,33 +71,26 @@ export const TeamForm = observer<Props>(function TeamForm({ state, onCancel, onS
   }, []);
 
   return (
-    <Form className={s(styles, { form: true })} context={form}>
+    <Form context={form} contents>
       <TabsState container={service.tabsContainer} localState={state.partsState} state={state} onCancel={onCancel}>
-        <div className={s(styles, { box: true }, className)}>
-          <div className={s(styles, { topBar: true })}>
-            <div className={s(styles, { topBarTabs: true })}>
-              <div className={s(styles, { statusMessage: true })}>
-                {state.statusMessage && (
-                  <>
-                    <IconOrImage className={s(styles, { iconOrImage: true })} icon="/icons/info_icon.svg" />
-                    {translate(state.statusMessage)}
-                  </>
-                )}
-              </div>
-              <TabList className={s(styles, { tabList: true })} disabled={false} underline big />
-            </div>
-            <div className={s(styles, { topBarActions: true })}>
+        <Container noWrap vertical>
+          <Container className={s(styles, { topBar: true })} gap keepSize noWrap>
+            <Container fill>
+              <StatusMessage message={translate(state.statusMessage || undefined)} type={ENotificationType.Info} />
+              <TabList disabled={false} underline big />
+            </Container>
+            <Container keepSize noWrap center gap compact>
               <Loader suspense inline hideMessage hideException>
                 <TeamFormActionsContext.Provider value={actions}>
                   <Placeholder container={service.actionsContainer} state={state} onCancel={onCancel} />
                 </TeamFormActionsContext.Provider>
               </Loader>
-            </div>
-          </div>
-          <div className={s(styles, { content: true })}>
+            </Container>
+          </Container>
+          <Container vertical>
             <TabPanelList />
-          </div>
-        </div>
+          </Container>
+        </Container>
       </TabsState>
     </Form>
   );
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.m.css
index b2e3ec8e74..769db6084c 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.m.css
@@ -1,8 +1,11 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
 .box {
-  composes: theme-background-secondary theme-text-on-secondary from global;
-  box-sizing: border-box;
-  padding-bottom: 24px;
-  display: flex;
-  flex-direction: column;
   height: 664px;
 }
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx
index beac2879ce..d0b05b90e3 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx
@@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
 
 import { TeamsResource } from '@cloudbeaver/core-authentication';
-import { s, TableContext, useS } from '@cloudbeaver/core-blocks';
+import { Container, s, TableContext, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
 import { TeamForm } from '../TeamForm';
@@ -34,8 +34,8 @@ export const TeamEdit = observer<Props>(function TeamEdit({ item }) {
   data.config.teamId = item;
 
   return (
-    <div className={s(styles, { box: true })}>
+    <Container className={s(styles, { box: true })} parent vertical>
       <TeamForm state={data} onCancel={collapse} />
-    </div>
+    </Container>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.m.css
index 3f7d709ce4..d8633380d7 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.m.css
@@ -6,10 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 
-.bar {
-  composes: theme-border-color-background theme-background-secondary theme-text-on-secondary from global;
-  position: relative;
-  display: flex;
+.header {
+  composes: theme-border-color-background from global;
   margin-bottom: 16px;
 
   &:before {
@@ -22,24 +20,6 @@
   }
 }
 
-.tabList {
-  display: flex;
-  position: relative;
-  flex-shrink: 0;
-  align-items: center;
-}
-
-.contentBox {
-  composes: theme-background-secondary theme-text-on-secondary theme-border-color-background from global;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: auto;
-}
-
-.submittingForm {
-  flex: 1;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
+.statusMessage {
+  margin-bottom: 8px;
 }
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.tsx
index 277b4de4e3..0babe5e59f 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.tsx
@@ -62,13 +62,18 @@ export const AdministrationUserForm = observer<Props>(function AdministrationUse
   useAutoLoad(AdministrationUserForm, state);
 
   return (
-    <Form context={form} className={s(styles, { submittingForm: true })} disabled={state.isDisabled} focusFirstChild>
+    <Form context={form} disabled={state.isDisabled} contents focusFirstChild>
       <TabsState container={administrationUserFormService.parts} localState={state.parts} formState={state}>
-        <Container compact parent noWrap vertical>
-          <Container className={s(styles, { bar: true })} gap keepSize noWrap>
+        <Container noWrap vertical>
+          <Container className={s(styles, { header: true })} gap keepSize noWrap>
             <Container fill>
-              <StatusMessage exception={getFirstException(state.exception)} type={state.statusType} message={state.statusMessage} />
-              <TabList className={s(styles, { tabList: true })} underline big />
+              <StatusMessage
+                className={s(styles, { statusMessage: true })}
+                exception={getFirstException(state.exception)}
+                type={state.statusType}
+                message={state.statusMessage}
+              />
+              <TabList underline big />
             </Container>
             <Container keepSize noWrap center gap compact>
               {editing && (
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccess.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccess.tsx
index a903b645ae..cb5846299e 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccess.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccess.tsx
@@ -8,7 +8,7 @@
 import { observer } from 'mobx-react-lite';
 
 import {
-  ColoredContainer,
+  Container,
   Group,
   Table,
   TableBody,
@@ -68,11 +68,11 @@ export const UserFormConnectionAccess: TabContainerPanelComponent<UserFormProps>
 
   if (connections.length === 0) {
     return (
-      <ColoredContainer>
+      <Container>
         <Group large>
           <TextPlaceholder>{translate('authentication_administration_user_connections_empty')}</TextPlaceholder>
         </Group>
-      </ColoredContainer>
+      </Container>
     );
   }
 
@@ -92,9 +92,9 @@ export const UserFormConnectionAccess: TabContainerPanelComponent<UserFormProps>
   // }
 
   return (
-    <ColoredContainer vertical gap>
+    <Container parent vertical>
       {/* {info && <InfoItem info={info} />} */}
-      <Group box large overflow>
+      <Group box border large overflow>
         <Table onSelect={handleSelect}>
           <TableHeader fixed>
             <TableColumnHeader min />
@@ -114,6 +114,6 @@ export const UserFormConnectionAccess: TabContainerPanelComponent<UserFormProps>
           </TableBody>
         </Table>
       </Group>
-    </ColoredContainer>
+    </Container>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccessPanel.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccessPanel.tsx
index 6cd6896344..b102127d84 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccessPanel.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccessPanel.tsx
@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { ColoredContainer, Group, TextPlaceholder, useAutoLoad, useTranslate } from '@cloudbeaver/core-blocks';
+import { ColoredContainer, Container, Group, TextPlaceholder, useAutoLoad, useTranslate } from '@cloudbeaver/core-blocks';
 import { type TabContainerPanelComponent, useTab } from '@cloudbeaver/core-ui';
 
 import type { UserFormProps } from '../AdministrationUserFormService';
@@ -29,11 +29,9 @@ export const UserFormConnectionAccessPanel: TabContainerPanelComponent<UserFormP
 
   if (isAdmin) {
     return (
-      <ColoredContainer>
-        <Group large>
-          <TextPlaceholder>{translate('connections_connection_access_admin_info')}</TextPlaceholder>
-        </Group>
-      </ColoredContainer>
+      <Container>
+        <Group large>{translate('connections_connection_access_admin_info')}</Group>
+      </Container>
     );
   }
 
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfo.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfo.tsx
index 49f5fe6d9e..ffcf2a7818 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfo.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfo.tsx
@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { ColoredContainer, Container, FieldCheckbox, Group, GroupTitle, Placeholder, useAutoLoad, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, FieldCheckbox, Group, GroupTitle, Placeholder, useAutoLoad, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { TabContainerPanelComponent, useTab, useTabState } from '@cloudbeaver/core-ui';
 
@@ -30,29 +30,21 @@ export const UserFormInfo: TabContainerPanelComponent<UserFormProps> = observer(
 
   const disabled = tabState.isLoading();
   const userManagementDisabled = administrationUsersManagementService.externalUserProviderEnabled;
-  // let info: TLocalizationToken | null = null;
-
-  // if (formState.mode === FormMode.Edit && tabState.isChanged()) {
-  //   info = 'ui_save_reminder';
-  // }
 
   return (
-    <ColoredContainer vertical gap overflow>
-      {/* {info && <InfoItem info={info} />} */}
-      <Container gap overflow>
-        <Group small gap vertical overflow>
-          <UserFormInfoCredentials formState={formState} tabState={tabState} tabSelected={tab.selected} disabled={disabled} />
-        </Group>
-        <Group small gap overflow>
-          <Placeholder container={userFormInfoPartService.placeholderContainer} formState={formState} />
-          <GroupTitle>{translate('authentication_user_status')}</GroupTitle>
-          <FieldCheckbox id={`${formState.id}_user_enabled`} name="enabled" state={tabState.state} disabled={disabled || userManagementDisabled}>
-            {translate('authentication_user_enabled')}
-          </FieldCheckbox>
-          <UserFormInfoTeams formState={formState} tabState={tabState} tabSelected={tab.selected} disabled={disabled} />
-        </Group>
-        <UserFormInfoMetaParameters formState={formState} tabState={tabState} tabSelected={tab.selected} disabled={disabled} />
-      </Container>
-    </ColoredContainer>
+    <Container overflow>
+      <Group small gap vertical overflow>
+        <UserFormInfoCredentials formState={formState} tabState={tabState} tabSelected={tab.selected} disabled={disabled} />
+      </Group>
+      <Group small gap overflow>
+        <Placeholder container={userFormInfoPartService.placeholderContainer} formState={formState} />
+        <GroupTitle>{translate('authentication_user_status')}</GroupTitle>
+        <FieldCheckbox id={`${formState.id}_user_enabled`} name="enabled" state={tabState.state} disabled={disabled || userManagementDisabled}>
+          {translate('authentication_user_enabled')}
+        </FieldCheckbox>
+        <UserFormInfoTeams formState={formState} tabState={tabState} tabSelected={tab.selected} disabled={disabled} />
+      </Group>
+      <UserFormInfoMetaParameters formState={formState} tabState={tabState} tabSelected={tab.selected} disabled={disabled} />
+    </Container>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Origin/UserFormOriginInfoPanel.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Origin/UserFormOriginInfoPanel.tsx
index 8436266bba..67c344ecd5 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Origin/UserFormOriginInfoPanel.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Origin/UserFormOriginInfoPanel.tsx
@@ -11,7 +11,6 @@ import { Fragment } from 'react';
 import { AdminUserOrigin, UsersResource } from '@cloudbeaver/core-authentication';
 import {
   Button,
-  ColoredContainer,
   Combobox,
   ConfirmationDialog,
   Container,
@@ -87,7 +86,7 @@ export const UserFormOriginInfoPanel: TabContainerPanelComponent<UserFormProps>
   }
 
   return (
-    <ColoredContainer gap>
+    <Container>
       <Group gap medium overflow>
         <Combobox
           state={localState}
@@ -104,13 +103,15 @@ export const UserFormOriginInfoPanel: TabContainerPanelComponent<UserFormProps>
         {origin && (
           <Fragment>
             <Container gap>
-              <ObjectPropertyInfoForm
-                properties={origin.details || empty}
-                emptyPlaceholder="authentication_administration_user_auth_method_no_details"
-                readOnly
-                small
-                autoHide
-              />
+              <Container gap keepSize>
+                <ObjectPropertyInfoForm
+                  properties={origin.details || empty}
+                  emptyPlaceholder="authentication_administration_user_auth_method_no_details"
+                  readOnly
+                  small
+                  autoHide
+                />
+              </Container>
             </Container>
             <GroupItem>
               <Button type="button" mod={['outlined']} onClick={deleteHandler}>
@@ -120,6 +121,6 @@ export const UserFormOriginInfoPanel: TabContainerPanelComponent<UserFormProps>
           </Fragment>
         )}
       </Group>
-    </ColoredContainer>
+    </Container>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/CreateUser.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/CreateUser.tsx
index 8b0fa7a4c7..61abf479fa 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/CreateUser.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/CreateUser.tsx
@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { ColoredContainer, Group, GroupTitle, Loader, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, Group, GroupTitle, Loader, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import type { IFormState } from '@cloudbeaver/core-ui';
 
 import { AdministrationUserForm } from '../UserForm/AdministrationUserForm';
@@ -24,22 +24,15 @@ export const CreateUser = observer<Props>(function CreateUser({ state, onCancel
   const styles = useS(style);
 
   return (
-    <Group
-      aria-label={translate('authentication_administration_user_connections_user_add')}
-      className={s(styles, { box: true })}
-      box
-      boxNoOverflow
-      vertical
-      noWrap
-    >
+    <Group aria-label={translate('authentication_administration_user_connections_user_add')} className={s(styles, { box: true })} gap vertical noWrap>
       <GroupTitle header keepSize>
         <Translate token="authentication_administration_user_connections_user_add" />
       </GroupTitle>
-      <ColoredContainer overflow vertical>
+      <Container overflow vertical>
         <Loader suspense>
           <AdministrationUserForm state={state} onClose={onCancel} />
         </Loader>
-      </ColoredContainer>
+      </Container>
     </Group>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.m.css
index 63e887ee08..7dde534b0c 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.m.css
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.m.css
@@ -7,10 +7,5 @@
  */
 
 .box {
-  composes: theme-background-secondary theme-text-on-secondary from global;
-  box-sizing: border-box;
-  padding-bottom: 24px;
   height: 600px;
-  display: flex;
-  flex-direction: column;
 }
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.tsx
index 2e5c97bec7..65ea2ce954 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserEdit.tsx
@@ -8,7 +8,7 @@
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 
-import { Loader, s, TableItemExpandProps, useS } from '@cloudbeaver/core-blocks';
+import { Container, Loader, s, TableItemExpandProps, useS } from '@cloudbeaver/core-blocks';
 import { App, useService } from '@cloudbeaver/core-di';
 import { FormMode } from '@cloudbeaver/core-ui';
 
@@ -30,10 +30,10 @@ export const UserEdit = observer<TableItemExpandProps<string>>(function UserEdit
   });
 
   return (
-    <div className={s(styles, { box: true })}>
+    <Container className={s(styles, { box: true })} parent vertical>
       <Loader suspense>
         <AdministrationUserForm state={state} onClose={onClose} />
       </Loader>
-    </div>
+    </Container>
   );
 });
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.tsx b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.tsx
index 8b33ca30be..029ae7a983 100644
--- a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.tsx
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.tsx
@@ -30,7 +30,7 @@ export const ConnectionAccessTableHeader = observer<React.PropsWithChildren<Prop
   const translate = useTranslate();
   const style = useS(styles);
   return (
-    <div className={s(style, { header: true }, className)}>
+    <header className={s(style, { header: true }, className)}>
       <Filter
         disabled={disabled}
         placeholder={translate('connections_connection_access_filter_placeholder')}
@@ -38,6 +38,6 @@ export const ConnectionAccessTableHeader = observer<React.PropsWithChildren<Prop
         state={filterState}
       />
       <div className={s(style, { buttons: true })}>{children}</div>
-    </div>
+    </header>
   );
 });
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx
index d735164dce..5dc5a1e36e 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx
@@ -26,8 +26,8 @@ export const TableHeader = observer<Props>(function TableHeader({ model, resultI
   const service = useService(TableHeaderService);
 
   return (
-    <div className={s(styles, { tableHeader: true }, className)}>
+    <header className={s(styles, { tableHeader: true }, className)}>
       <Placeholder container={service.tableHeaderPlaceholder} model={model} resultIndex={resultIndex} simple={simple} />
-    </div>
+    </header>
   );
 });