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"
/>
-