[DevTools] Adjust the rects size by one pixel smaller (#34876)

This ensures that the outline of a previous rectangle lines up on the
same pixel as the next rectangle so that they appear consecutive.

<img width="244" height="51" alt="Screenshot 2025-10-16 at 11 35 32 AM"
src="https://github.com/user-attachments/assets/75ffde6f-8cc6-49c1-8855-3953569546b4"
/>

I don't love this implementation. There's probably a smarter way. Was
trying to avoid adding another element.

Author: sebmarkbage

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js

@@ -36,12 +36,14 @@ function ScaledRect({
   rect,
   visible,
   suspended,
+  adjust,
   ...props
 }: {
   className: string,
   rect: Rect,
   visible: boolean,
   suspended: boolean,
+  adjust?: boolean,
   ...
 }): React$Node {
   const viewBox = useContext(ViewBox);
@@ -57,8 +59,9 @@ function ScaledRect({
       data-visible={visible}
       data-suspended={suspended}
       style={{
-        width,
-        height,
+        // Shrink one pixel so that the bottom outline will line up with the top outline of the next one.
+        width: adjust ? 'calc(' + width + ' - 1px)' : width,
+        height: adjust ? 'calc(' + height + ' - 1px)' : height,
         top: y,
         left: x,
       }}
@@ -160,6 +163,7 @@ function SuspenseRects({
                 className={styles.SuspenseRectsRect}
                 rect={rect}
                 data-highlighted={selected}
+                adjust={true}
                 onClick={handleClick}
                 onDoubleClick={handleDoubleClick}
                 onPointerOver={handlePointerOver}