Revert "Revert "Revert "Improve PageLayout pane drag performance with pointer capture and GPU-accelerated transforms"""

e2e/components/Axe.test.ts

@@ -14,8 +14,6 @@ const SKIPPED_TESTS = [
   'components-flash-features--with-icon-action-dismiss', // TODO: Remove once color-contrast issues have been resolved
   'components-flash-features--with-icon-and-action', // TODO: Remove once color-contrast issues have been resolved
   'components-filteredactionlist--default',
-  'components-pagelayout-performance-tests--medium-content',
-  'components-pagelayout-performance-tests--heavy-content',
 ]
 
 type Component = {

packages/react/src/PageLayout/PageLayout.module.css

@@ -1,3 +1,15 @@
+/* Maintain resize cursor while dragging */
+/* stylelint-disable-next-line selector-no-qualifying-type */
+body[data-page-layout-dragging='true'] {
+  cursor: col-resize;
+}
+
+/* Disable text selection while dragging */
+/* stylelint-disable-next-line selector-no-qualifying-type */
+body[data-page-layout-dragging='true'] * {
+  user-select: none;
+}
+
 .PageLayoutRoot {
   /* Region Order */
   --region-order-header: 0;
@@ -371,26 +383,6 @@
   }
 }
 
-/**
- * OPTIMIZATION: Aggressive containment during drag for ContentWrapper
- * CSS handles most optimizations automatically via :has() selector
- * JavaScript only handles scroll locking (can't be done in CSS)
- */
-.PageLayoutContent:has(.DraggableHandle[data-dragging='true']) .ContentWrapper {
-  /* Add paint containment during drag - safe since user can't interact */
-  contain: layout style paint;
-
-  /* Disable interactions */
-  pointer-events: none;
-
-  /* Disable transitions to prevent expensive recalculations */
-  transition: none;
-
-  /* Force compositor layer for hardware acceleration */
-  will-change: width;
-  transform: translateZ(0);
-}
-
 .Content {
   width: 100%;
 
@@ -417,16 +409,6 @@
   }
 }
 
-/**
- * OPTIMIZATION: Freeze content layout during resize drag
- * This prevents expensive recalculations of large content areas
- * while keeping content visible (just frozen in place)
- */
-.PageLayoutContent:has(.DraggableHandle[data-dragging='true']) .Content {
-  /* Full containment (without size) - isolate from layout recalculations */
-  contain: layout style paint;
-}
-
 .PaneWrapper {
   display: flex;
   width: 100%;
@@ -616,26 +598,6 @@
   }
 }
 
-/**
- * OPTIMIZATION: Performance enhancements for Pane during drag
- * CSS handles all optimizations automatically - JavaScript only locks scroll
- */
-.PaneWrapper:has(.DraggableHandle[data-dragging='true']) .Pane {
-  /* Full containment - isolate from layout recalculations */
-  contain: layout style paint;
-
-  /* Disable interactions during drag */
-  pointer-events: none;
-
-  /* Disable transitions during drag */
-  transition: none;
-
-  /* Force hardware acceleration */
-  will-change: width, transform;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-}
-
 .PaneHorizontalDivider {
   &:where([data-position='start']) {
     /* stylelint-disable-next-line primer/spacing */
@@ -734,22 +696,12 @@
   padding: var(--spacing);
 }
 
-/**
- * DraggableHandle - Interactive resize handle
- */
 .DraggableHandle {
   position: absolute;
   inset: 0 -2px;
   cursor: col-resize;
   background-color: transparent;
   transition-delay: 0.1s;
-
-  /**
-   * OPTIMIZATION: Prevent touch scrolling and text selection during drag
-   * This is done in CSS because it needs to be set before any pointer events
-   */
-  touch-action: none;
-  user-select: none;
 }
 
 .DraggableHandle:hover {
@@ -758,7 +710,6 @@
 
 .DraggableHandle[data-dragging='true'] {
   background-color: var(--bgColor-accent-emphasis);
-  cursor: col-resize;
 }
 
 .DraggableHandle[data-dragging='true']:hover {