From 83fe4e884a534513e48211ddc8fdca37167005fa Mon Sep 17 00:00:00 2001
From: Aleksei Potsetsuev <wrouds@gmail.com>
Date: Thu, 12 Sep 2024 21:23:27 +0800
Subject: [PATCH] chore: replace inline styles

---
 .../src/SettingsPanel/Settings.module.css        | 16 ++++++++++++++++
 .../src/SettingsPanel/Settings.tsx               |  7 ++++---
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.module.css

diff --git a/webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.module.css b/webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.module.css
new file mode 100644
index 00000000000..cb6b737d1b2
--- /dev/null
+++ b/webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.module.css
@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+.settingsGroups {
+  width: 240px;
+}
+
+.settingsGroups,
+.settingsContainer {
+  height: 100%;
+}
diff --git a/webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.tsx b/webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.tsx
index 63ae061c974..c47db4d6474 100644
--- a/webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.tsx
+++ b/webapp/packages/plugin-settings-panel/src/SettingsPanel/Settings.tsx
@@ -7,11 +7,12 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { Container, Filter, Group, TextPlaceholder, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, Filter, Group, s, TextPlaceholder, useTranslate } from '@cloudbeaver/core-blocks';
 import { type ISettingsSource, ROOT_SETTINGS_GROUP, SettingsGroup } from '@cloudbeaver/core-settings';
 import { useTreeData, useTreeFilter } from '@cloudbeaver/plugin-navigation-tree';
 
 import { getSettingGroupId } from './getSettingGroupId';
+import classes from './Settings.module.css';
 import { settingsFilter } from './settingsFilter';
 import { SettingsGroups } from './SettingsGroups/SettingsGroups';
 import { SettingsList } from './SettingsList';
@@ -75,10 +76,10 @@ export const Settings = observer<ISettingsProps>(function Settings({ source, acc
 
   return (
     <Container gap overflow noWrap>
-      <Group style={{ height: '100%', width: '240px' }} vertical box keepSize overflow>
+      <Group className={s(classes, { settingsGroups: true })} vertical box keepSize overflow>
         <SettingsGroups treeData={treeData} onClick={handleClick} />
       </Group>
-      <Container style={{ height: '100%' }} overflow vertical gap noWrap>
+      <Container className={s(classes, { settingsContainer: true })} overflow vertical gap noWrap>
         <Container gap keepSize>
           <Filter
             state={treeFilter}