fix: preserve page scrolling over popups

src/components/ContentWithPopup/ContentWithPopup.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import type {PopupProps} from '@gravity-ui/uikit';
 import {Popup} from '@gravity-ui/uikit';
 
+import {getPopupScrollContainer} from '../HoverPopup/getPopupScrollContainer';
+
 interface ContentWithPopupProps extends PopupProps {
     content: React.ReactNode;
     className?: string;
@@ -17,11 +19,13 @@ export const ContentWithPopup = ({
     pinOnClick,
     hasArrow = true,
     placement = ['top', 'bottom'],
+    floatingStyles,
     ...props
 }: ContentWithPopupProps) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
     const [isPinned, setIsPinned] = React.useState(false);
     const anchor = React.useRef(null);
+    const container = getPopupScrollContainer(anchor.current);
 
     const showPopup = () => {
         setIsPopupVisible(true);
@@ -42,6 +46,8 @@ export const ContentWithPopup = ({
     return (
         <React.Fragment>
             <Popup
+                container={container}
+                floatingStyles={{fontFamily: 'var(--g-text-body-font-family)', ...floatingStyles}}
                 anchorElement={anchor.current}
                 open={isPinned || isPopupVisible}
                 placement={placement}

src/components/HoverPopup/HoverPopup.tsx

@@ -6,6 +6,8 @@ import debounce from 'lodash/debounce';
 
 import {YDB_POPOVER_CLASS_NAME} from '../../utils/constants';
 
+import {getPopupScrollContainer} from './getPopupScrollContainer';
+
 const DEBOUNCE_TIMEOUT = 100;
 
 function useVisibleAnchor(anchorElement: HTMLElement | null, open: boolean) {
@@ -148,6 +150,7 @@ export const HoverPopup = ({
     const anchorElement = anchorRef?.current || anchor.current;
     // Clipping a paired disk must not clear the shared hover state via onHidePopup.
     const isAnchorVisible = useVisibleAnchor(anchorElement, open);
+    const container = getPopupScrollContainer(anchorElement);
 
     return (
         <React.Fragment>
@@ -156,6 +159,9 @@ export const HoverPopup = ({
             </span>
             {anchorElement ? (
                 <Popup
+                    container={container}
+                    // Keep portal typography when the page uses a different font.
+                    floatingStyles={{fontFamily: 'var(--g-text-body-font-family)'}}
                     anchorElement={anchorElement}
                     onOpenChange={(_open, _event, reason) => {
                         if (reason === 'escape-key') {

src/components/HoverPopup/getPopupScrollContainer.ts

@@ -0,0 +1,19 @@
+export function getPopupScrollContainer(anchor: HTMLElement | null) {
+    if (!anchor) {
+        return undefined;
+    }
+    const doc = anchor.ownerDocument;
+    let parent = anchor.parentElement;
+    while (parent) {
+        if (
+            parent === doc.fullscreenElement ||
+            (/auto|scroll/.test(doc.defaultView?.getComputedStyle(parent).overflowY ?? '') &&
+                parent.scrollHeight > parent.clientHeight)
+        ) {
+            // Document scrolling already works through the default portal.
+            return parent === doc.scrollingElement ? undefined : parent;
+        }
+        parent = parent.parentElement;
+    }
+    return undefined;
+}

tests/suites/storage/vdiskColoring.test.ts

@@ -515,6 +515,42 @@ test('keeps paired disk popups inside the viewport without expanding the page',
     expect(maxPageWidthWhileClosing).toBe(pageWidth);
 });
 
+test('wheel over disk popups scrolls the page', async ({page}) => {
+    const response = createMockStorageGroupsResponse();
+    const group = response.StorageGroups?.[0];
+    if (!group) {
+        throw new Error('Missing storage group fixture');
+    }
+    response.StorageGroups = Array.from({length: 40}, (_, index) => ({
+        ...group,
+        GroupId: String(9000000000 + index),
+    }));
+    response.TotalGroups = response.FoundGroups = 40;
+    await page.setViewportSize({width: 1500, height: 800});
+    await enableExpertMode(page, VDisksGroupBy.State, false);
+    await setupVDiskColoringMocks(page, response);
+    await gotoStoragePage(page, VDisksGroupBy.State, false);
+    await expectStorageGroupRowsReady(page, false);
+    const scroll = page.locator('.ydb-cluster');
+    for (const name of ['PDisk', 'VDisk']) {
+        await scroll.evaluate((element) => element.scrollTo({top: 0, left: 0}));
+        const row = getStorageGroupRow(page, 0);
+        await (name === 'PDisk' ? getPDiskItems(row) : getVDiskItems(row)).first().hover();
+        const action = page.getByRole('link', {name: `Go to ${name}`, exact: true});
+        await expect(action).toHaveAttribute('href', /nodeId=7000/);
+        const popup = page.locator('.ydb-popover').filter({has: action});
+        await expect(popup).toHaveCSS('max-height', 'none');
+        await expect(popup).toHaveCSS('overflow-y', 'visible');
+        await action.hover();
+        const before = await scroll.evaluate((element) => element.scrollTop);
+        await page.mouse.wheel(0, 200);
+        await expect
+            .poll(() => scroll.evaluate((element) => element.scrollTop))
+            .toBeGreaterThan(before);
+        await page.keyboard.press('Escape');
+    }
+});
+
 test.describe('VDisk Coloring - Expert Mode visual snapshots', () => {
     test.describe.configure({timeout: 60_000});