[UPdate] Main Page: Side bar. Now, scrollable.

src-ui/app/main_page/sidebar_section/SidebarSection.jsx

@@ -10,15 +10,17 @@ import { OpenSettings } from "./open_settings/OpenSettings";
 
 export const SidebarSection = () => {
     const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
-    const container_class_name = clsx(styles["container"], {
+    const container_class_name = clsx(styles.container, {
-        [styles["is_compact_mode"]]: currentIsMainPageCompactMode
+        [styles.is_compact_mode]: currentIsMainPageCompactMode
     });
 
     return (
         <div className={container_class_name}>
             <Logo />
-            <MainFunctionSwitch />
+            <div className={styles.scroll_container}>
-            {!currentIsMainPageCompactMode && <LanguageSettings />}
+                <MainFunctionSwitch />
+                {!currentIsMainPageCompactMode && <LanguageSettings />}
+            </div>
             <OpenSettings />
         </div>
     );

src-ui/app/main_page/sidebar_section/SidebarSection.module.scss

@@ -1,3 +1,24 @@
+.scroll_container {
+    width: calc(100% + 0.8rem);
+    overflow-y: scroll;
+    overflow-x: hidden;
+    margin-bottom: calc(2rem + 1.6rem + 2rem); // config button's sizes (svg + padding + margin).
+
+    &::-webkit-scrollbar {
+        width: 0.8rem;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: var(--dark_888_color);
+        border-radius: 0.4rem;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--dark_800_color);
+        border-radius: 0.4rem;
+    }
+
+
+}
+
 .container {
     position: relative;
     min-width: 23rem;