diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css index c718be7ea9499..eaf146a286cc8 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css @@ -106,10 +106,23 @@ overflow: auto; } +.RectsBox { + position: relative; + flex-grow: 1; + background: var(--color-border); +} + .Rects { + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + margin: auto; + position: absolute; + inset: 0; padding: 0.25rem; - flex-grow: 1; overflow: auto; + background-color: var(--color-background); } .SuspenseTreeViewHeader { diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index 766e6f51b299f..4e615f1a316cf 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -186,6 +186,9 @@ function SynchronizedScrollContainer({ if (element === null) { return; } + // Mirror the viewport aspect ratio of the real window. + const viewportAspectRatio = (right - left) / (bottom - top); + element.style.aspectRatio = viewportAspectRatio; const scale = scaleRef.current / element.clientWidth; const targetLeft = Math.round(left / scale); const targetTop = Math.round(top / scale); @@ -503,11 +506,13 @@ function SuspenseTab(_: {}) { orientation="horizontal" /> - - - +
+ + + +