[WIP] Update drag/resize performance in PageLayout based on feedback (#7390)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: mattcosta7 <[email protected]>

Author: Copilot

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

@@ -715,7 +715,8 @@
   content: '';
   position: absolute;
   inset: 0;
-  background-color: var(--bgColor-neutral-muted);
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--draggable-handle--bg-color, var(--bgColor-neutral-muted));
   opacity: var(--draggable-handle--drag-opacity, 0);
   transition: var(--draggable-handle--transition, opacity 150ms ease); /* compositor-friendly, disabled during drag */
   border-radius: inherit; /* optional if you need rounded corners */

packages/react/src/PageLayout/paneUtils.ts

@@ -9,7 +9,9 @@ const DATA_DRAGGING_ATTR = 'data-dragging'
 /** Apply visual feedback and performance optimizations during drag */
 export function setDraggingStyles({handle, pane, content}: DraggingStylesParams) {
   // Handle visual feedback (must be inline for instant response)
-  handle?.style.setProperty('background-color', 'var(--bgColor-accent-emphasis)')
+  // Use CSS variable to control ::before pseudo-element background color.
+  // This avoids cascade conflicts between inline styles and pseudo-element backgrounds.
+  handle?.style.setProperty('--draggable-handle--bg-color', 'var(--bgColor-accent-emphasis)')
   handle?.style.setProperty('--draggable-handle--drag-opacity', '1')
   handle?.style.setProperty('--draggable-handle--transition', 'none')
 
@@ -20,7 +22,7 @@ export function setDraggingStyles({handle, pane, content}: DraggingStylesParams)
 
 /** Remove drag styles and restore normal state */
 export function removeDraggingStyles({handle, pane, content}: DraggingStylesParams) {
-  handle?.style.removeProperty('background-color')
+  handle?.style.removeProperty('--draggable-handle--bg-color')
   handle?.style.removeProperty('--draggable-handle--drag-opacity')
   handle?.style.removeProperty('--draggable-handle--transition')