feature/PxWeb2-896 New layout with virtualized separated mobile and desktop tables

packages/pxweb2-ui/package.json

@@ -16,6 +16,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@tanstack/react-virtual": "^3.13.21",
     "clsx": "^2.1.1",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "motion": "^12.38.0",

packages/pxweb2-ui/src/lib/components/BottomSheet/BottomSheet.tsx

@@ -71,6 +71,7 @@ export function BottomSheet({
 
   return (
     <dialog
+      data-px-overlay-backdrop="true"
       onClick={(event) => handleClick(event)}
       onKeyDown={handleKeyDown}
       ref={bottomSheetRef}

packages/pxweb2-ui/src/lib/components/Modal/Modal.spec.tsx

@@ -160,22 +160,25 @@ describe('Modal', () => {
     expect(onCloseMock).toHaveBeenCalledWith(true, 'Enter');
   });
 
-  it('should update body overflow style when opening and closing', () => {
-    const { rerender } = render(
+  it('should expose overlay marker and toggle dialog visibility when opening and closing', () => {
+    const { rerender, container } = render(
       <Modal isOpen={true}>
         <span>test</span>
       </Modal>,
     );
 
-    expect(document.body.style.overflow).toBe('hidden');
+    const dialog = container.querySelector('dialog');
+
+    expect(dialog?.getAttribute('data-px-overlay-backdrop')).toBe('true');
+    expect(dialog?.style.display).toBe('block');
 
     rerender(
       <Modal isOpen={false}>
         <span>test</span>
       </Modal>,
     );
 
-    expect(document.body.style.overflow).toBe('auto');
+    expect(dialog?.style.display).toBe('none');
   });
 
   it('should apply custom className when provided', () => {

packages/pxweb2-ui/src/lib/components/Modal/Modal.tsx

@@ -58,21 +58,12 @@ export function Modal({
     if (modalElement) {
       if (isModalOpen) {
         modalElement.showModal();
-        setWindowScroll(false);
       } else {
         modalElement.close();
-        setWindowScroll(true);
       }
     }
   }, [isModalOpen]);
 
-  const setWindowScroll = (scroll: boolean) => {
-    const body = document.querySelector('body');
-    if (body) {
-      body.style.overflow = scroll ? 'auto' : 'hidden';
-    }
-  };
-
   const handleCloseModal = useCallback(
     (updated: boolean, event?: ReactKeyboardEvent | MouseEvent) => {
       const handleKeyboardEvent = (
@@ -84,15 +75,13 @@ export function Modal({
           keyPress === 'Enter' || keyPress === ' ' || keyPress === 'Escape';
 
         if (onClose && isValidKeyPress) {
-          setWindowScroll(true);
           onClose(updated, keyPress);
           setIsModalOpen(false);
         }
       };
 
       const handleMouseEvent = (updated: boolean) => {
         if (onClose) {
-          setWindowScroll(true);
           onClose(updated);
           setIsModalOpen(false);
         }
@@ -124,6 +113,7 @@ export function Modal({
 
   return (
     <dialog
+      data-px-overlay-backdrop="true"
       ref={modalRef}
       className={cl(classes.modal) + cssClasses}
       aria-labelledby="px-modal-heading"

packages/pxweb2-ui/src/lib/components/SideSheet/SideSheet.module.scss

@@ -15,6 +15,7 @@
   padding: 0px 0px 0px 0px;
   border-style: none;
   max-height: 100vh; // Override default margins at top and bottom for <dialog>
+  overflow: hidden;
 }
 
 .sideSheet::backdrop {

packages/pxweb2-ui/src/lib/components/SideSheet/SideSheet.tsx

@@ -65,6 +65,7 @@ export function SideSheet({
 
   return (
     <dialog
+      data-px-overlay-backdrop="true"
       onClick={(event) => handleClick(event)}
       onKeyDown={handleKeyDown}
       ref={sideSheetRef}