fix(Settings): add scroll only menu items, keep title and search fixed

src/components/Settings/Settings.module.scss

@@ -127,6 +127,9 @@ $block: '.#{variables.$ns}settings';
     }
 
     &__menu {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
         border-right: 1px solid var(--g-color-line-generic);
     }
 

src/components/Settings/SettingsMenu/SettingsMenu.module.scss

@@ -4,6 +4,12 @@
 $block: '.#{variables.$ns}settings-menu';
 
 #{$block} {
+    overflow-y: auto;
+
+    &_scrolled {
+        box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.15);
+    }
+
     &__group {
         &-heading {
             @include mixins.text-accent;

src/components/Settings/SettingsMenu/SettingsMenu.tsx

@@ -19,10 +19,15 @@ export const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuP
     // eslint-disable-next-line prefer-arrow-callback
     function SettingsMenu({items, onChange, activeItemId}, ref) {
         const [focusItemId, setFocusId] = React.useState<string>();
+        const [scrolled, setScrolled] = React.useState(false);
         const containerRef = React.useRef<HTMLDivElement>(null);
         const handleChange = useStableCallback(onChange);
         const getFocused = useCurrent(focusItemId);
 
+        const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
+            setScrolled(event.currentTarget.scrollTop > 0);
+        }, []);
+
         React.useImperativeHandle(
             ref,
             () => ({
@@ -51,7 +56,7 @@ export const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuP
         );
 
         return (
-            <div ref={containerRef} className={b()}>
+            <div ref={containerRef} className={b({scrolled})} onScroll={handleScroll}>
                 {items.map((firstLevelItem) => {
                     if ('groupTitle' in firstLevelItem) {
                         return (

src/components/Settings/__stories__/Settings.stories.tsx

@@ -6,6 +6,7 @@ import {Settings} from '..';
 
 import {SettingsDemo} from './SettingsDemo';
 import {SettingsMobileDemo} from './SettingsMobileDemo';
+import {SettingsOverflowDemo} from './SettingsOverflowDemo';
 
 export default {
     title: 'components/Settings',
@@ -23,6 +24,10 @@ export default {
                         id: 'heading-order', // not relevant in stories
                         enabled: false,
                     },
+                    {
+                        id: 'scrollable-region-focusable', // https://github.com/gravity-ui/uikit/issues/1549
+                        enabled: false,
+                    },
                 ],
             },
         },
@@ -34,3 +39,6 @@ export const Showcase = ShowcaseTemplate.bind({});
 
 const ShowcaseMobileTemplate: StoryFn = () => <SettingsMobileDemo />;
 export const ViewMobile = ShowcaseMobileTemplate.bind({});
+
+const OverflowTemplate: StoryFn = () => <SettingsOverflowDemo />;
+export const Overflow = OverflowTemplate.bind({});

src/components/Settings/__stories__/SettingsOverflowDemo.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {Gear} from '@gravity-ui/icons';
+import {Switch} from '@gravity-ui/uikit';
+
+import {Settings} from '../index';
+
+export function SettingsOverflowDemo() {
+    const groups = Array.from({length: 5}, (_g, groupIndex) => ({
+        id: `group-${groupIndex}`,
+        title: `Group ${groupIndex + 1}`,
+        pages: Array.from({length: 6}, (_p, pageIndex) => ({
+            id: `group-${groupIndex}-page-${pageIndex}`,
+            title: `Page ${pageIndex + 1}`,
+        })),
+    }));
+
+    const sections = Array.from({length: 8}, (_s, sectionIndex) => ({
+        id: `section-${sectionIndex}`,
+        title: `Section ${sectionIndex + 1}`,
+        items: Array.from({length: 5}, (_i, itemIndex) => ({
+            id: `section-${sectionIndex}-item-${itemIndex}`,
+            title: `Setting ${itemIndex + 1}`,
+        })),
+    }));
+
+    return (
+        <div style={{height: 600}}>
+            <Settings>
+                {groups.map((group) => (
+                    <Settings.Group key={group.id} id={group.id} groupTitle={group.title}>
+                        {group.pages.map((page) => (
+                            <Settings.Page
+                                key={page.id}
+                                id={page.id}
+                                title={page.title}
+                                icon={{data: Gear}}
+                            >
+                                {sections.map((section) => (
+                                    <Settings.Section key={section.id} title={section.title}>
+                                        {section.items.map((item) => (
+                                            <Settings.Item key={item.id} title={item.title}>
+                                                <Switch
+                                                    controlProps={{
+                                                        'aria-label': item.title,
+                                                    }}
+                                                />
+                                            </Settings.Item>
+                                        ))}
+                                    </Settings.Section>
+                                ))}
+                            </Settings.Page>
+                        ))}
+                    </Settings.Group>
+                ))}
+            </Settings>
+        </div>
+    );
+}

src/components/Settings/__tests__/BurgerMenu.visual.test.tsx

@@ -16,4 +16,10 @@ test.describe('Settings', () => {
 
         await expectScreenshot();
     });
+
+    test('render story: <Overflow>', async ({mount, expectScreenshot}) => {
+        await mount(<SettingsStories.Overflow />);
+
+        await expectScreenshot();
+    });
 });