Adjust aspect ratio of "x ray" viewport to the same as the window

Author: sebmarkbage

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 {

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"
               />
             </header>
-            <SynchronizedScrollContainer
-              className={styles.Rects}
-              scaleRef={scaleRef}>
-              <SuspenseRects scaleRef={scaleRef} />
-            </SynchronizedScrollContainer>
+            <div className={styles.RectsBox}>
+              <SynchronizedScrollContainer
+                className={styles.Rects}
+                scaleRef={scaleRef}>
+                <SuspenseRects scaleRef={scaleRef} />
+              </SynchronizedScrollContainer>
+            </div>
             <footer className={styles.SuspenseTreeViewFooter}>
               <SuspenseTimeline />
               <div className={styles.SuspenseTreeViewFooterButtons}>