CB-4541 fix: settings overflow scroll effect

dbeaver · Sep 11, 2024 · 4f1631c · 4f1631c
1 parent 91e28e5
commit 4f1631c
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 26 deletions.
diff --git a/webapp/packages/core-app/src/Body.tsx b/webapp/packages/core-app/src/Body.tsx
@@ -50,7 +50,17 @@ export const Body = observer(function Body() {
   return (
     <DNDProvider>
       <Loader className={s(styles, { loader: true })} suspense>
-        <div ref={ref} className={s(styles, { bodyContent: true }, `theme-${themeService.currentTheme.id}`)}>
+        <div
+          ref={ref}
+          className={s(
+            styles,
+            { bodyContent: true },
+            `theme-${themeService.currentTheme.id}`,
+            'theme-typography--body2',
+            'theme-background-surface',
+            'theme-text-on-surface',
+          )}
+        >
           <Loader className={s(styles, { loader: true })} suspense>
             {Screen && <Screen {...screenService.routerService.params} />}
           </Loader>

diff --git a/webapp/packages/plugin-settings-administration/src/SettingsAdministration.module.css b/webapp/packages/plugin-settings-administration/src/SettingsAdministration.module.css
diff --git a/webapp/packages/plugin-settings-administration/src/SettingsAdministration.tsx b/webapp/packages/plugin-settings-administration/src/SettingsAdministration.tsx
@@ -8,21 +8,18 @@
 import { observer } from 'mobx-react-lite';
 
 import type { AdministrationItemContentProps } from '@cloudbeaver/core-administration';
-import { ColoredContainer, Form, Group, s, ToolsAction, ToolsPanel, useForm, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { ColoredContainer, Form, Group, ToolsAction, ToolsPanel, useForm, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { ServerSettingsService } from '@cloudbeaver/core-root';
 import { Settings } from '@cloudbeaver/plugin-settings-panel';
 
-import style from './SettingsAdministration.module.css';
-
 const clientScope = ['server'];
 
 export const SettingsAdministration = observer<AdministrationItemContentProps>(function SettingsAdministration() {
   const translate = useTranslate();
   const serverSettingsService = useService(ServerSettingsService);
   const notificationService = useService(NotificationService);
-  const styles = useS(style);
   const changed = serverSettingsService.isEdited();
 
   async function handleSave() {
@@ -49,7 +46,7 @@ export const SettingsAdministration = observer<AdministrationItemContentProps>(f
 
   return (
     <Form context={form} contents>
-      <ColoredContainer parent vertical wrap gap>
+      <ColoredContainer overflow parent vertical noWrap gap>
         <Group box keepSize>
           <ToolsPanel rounded>
             <ToolsAction icon="admin-save" viewBox="0 0 24 24" disabled={!changed} onClick={() => form.submit()}>

diff --git a/webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.tsx b/webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.tsx
@@ -78,15 +78,17 @@ export const Settings = observer<ISettingsProps>(function Settings({ source, acc
       <Group style={{ height: '100%', minWidth: '240px' }} box keepSize overflow>
         <SettingsGroups treeData={treeData} onClick={handleClick} />
       </Group>
-      <Container style={{ height: '100%' }} overflow vertical gap fill>
+      <Container style={{ height: '100%' }} overflow vertical gap noWrap>
         <Container gap keepSize>
           <Filter
             value={treeFilter.filter}
             placeholder={translate('plugin_settings_panel_search')}
             onChange={filter => treeFilter.setFilter(filter)}
           />
         </Container>
-        <SettingsList treeData={treeData} treeFilter={treeFilter} source={source} settings={settings.settings} />
+        <Container overflow vertical>
+          <SettingsList treeData={treeData} treeFilter={treeFilter} source={source} settings={settings.settings} />
+        </Container>
       </Container>
     </Container>
   );

diff --git a/webapp/packages/plugin-user-profile-settings/src/UserProfileSettings.tsx b/webapp/packages/plugin-user-profile-settings/src/UserProfileSettings.tsx
@@ -50,8 +50,8 @@ export const UserProfileSettings = observer(function UserProfileSettings() {
 
   return (
     <Form context={form} contents>
-      <ColoredContainer parent compact vertical wrap gap>
-        <Group box keepSize>
+      <ColoredContainer parent overflow compact vertical noWrap gap>
+        <Group overflow box keepSize>
           <ToolsPanel rounded minHeight>
             <ToolsAction icon="admin-save" viewBox="0 0 24 24" disabled={!changed} onClick={() => form.submit()}>
               {translate('ui_processing_save')}

diff --git a/webapp/packages/plugin-user-profile/src/UserProfileOptionsPanel.tsx b/webapp/packages/plugin-user-profile/src/UserProfileOptionsPanel.tsx
@@ -21,14 +21,14 @@ export const UserProfileOptionsPanel = observer(function UserProfileOptionsPanel
   const styles = useS(style);
   const userProfileTabsService = useService(UserProfileTabsService);
   return (
-    <ColoredContainer className={s(styles, { userProfileOptionsPanel: true })} parent compact vertical noWrap maximum>
+    <ColoredContainer className={s(styles, { userProfileOptionsPanel: true })} overflow parent compact vertical noWrap maximum>
       <TabsState container={userProfileTabsService.tabContainer} lazy>
-        <Group box keepSize noWrap>
+        <Group overflow box keepSize noWrap>
           <SContext registry={tabsStyleRegistry}>
             <TabList underline />
           </SContext>
         </Group>
-        <Container vertical>
+        <Container overflow vertical noWrap>
           <TabPanelList />
         </Container>
       </TabsState>