From 145749e7c645f32d7b523d685508eb0d549f03f6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 29 Dec 2025 20:07:45 +0000 Subject: [PATCH 1/3] Initial plan From 4ce3401227c513f802d2aaafe4b04d6c93091934 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 29 Dec 2025 20:15:50 +0000 Subject: [PATCH 2/3] Fix CSS cascade issue by using CSS variable for drag handle background color Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com> --- packages/react/src/PageLayout/PageLayout.module.css | 3 ++- packages/react/src/PageLayout/paneUtils.ts | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css index 356e0c46d2f..7c600dc3968 100644 --- a/packages/react/src/PageLayout/PageLayout.module.css +++ b/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 */ diff --git a/packages/react/src/PageLayout/paneUtils.ts b/packages/react/src/PageLayout/paneUtils.ts index 4a99b01bed2..3c5e98d616e 100644 --- a/packages/react/src/PageLayout/paneUtils.ts +++ b/packages/react/src/PageLayout/paneUtils.ts @@ -9,7 +9,8 @@ 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 + 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 +21,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') From e1c74618fb3c8d7712daf7fc0b85db8f255ed87a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 29 Dec 2025 20:18:52 +0000 Subject: [PATCH 3/3] Improve comment clarity about CSS cascade conflict avoidance Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com> --- packages/react/src/PageLayout/paneUtils.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/PageLayout/paneUtils.ts b/packages/react/src/PageLayout/paneUtils.ts index 3c5e98d616e..a18650808e4 100644 --- a/packages/react/src/PageLayout/paneUtils.ts +++ b/packages/react/src/PageLayout/paneUtils.ts @@ -9,7 +9,8 @@ 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) - // Use CSS variable to control ::before pseudo-element background color + // 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')