diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index aadb6a0fba0df..6b43f873ae850 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -12,6 +12,11 @@ background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); } +.SuspenseRectsRootOutline { + outline-width: 4px; + border-radius: 0.125rem; +} + .SuspenseRectsRoot[data-hovered='true'] { background-color: color-mix(in srgb, var(--color-transition) 15%, transparent); } @@ -100,10 +105,6 @@ pointer-events: none; } -.SuspenseRectOutlineRoot { - outline-color: var(--color-transition); -} - .SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect { box-shadow: none; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index e08cdc41736b9..221a6c90f823e 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -510,7 +510,6 @@ function SuspenseRectsContainer({ let selectedBoundingBox = null; let selectedEnvironment = null; if (isRootSelected) { - selectedBoundingBox = boundingBox; selectedEnvironment = rootEnvironment; } else if (inspectedElementID !== null) { const selectedSuspenseNode = store.getSuspenseByID(inspectedElementID); @@ -534,6 +533,7 @@ function SuspenseRectsContainer({ className={ styles.SuspenseRectsContainer + (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') + + (isRootSelected ? ' ' + styles.SuspenseRectsRootOutline : '') + ' ' + getClassNameForEnvironment(rootEnvironment) } @@ -551,7 +551,6 @@ function SuspenseRectsContainer({