Add a slight border radius to the rects

sebmarkbage · sebmarkbage · commit 406a8f165d00 · 2025-10-02T13:24:56.000-04:00
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
@@ -2,6 +2,7 @@
   padding: .25rem;
   cursor: pointer;
   outline: 1px solid var(--color-component-name);
+  border-radius: 0.25rem;
 }
 
 .SuspenseRectsContainer[data-highlighted='true'] {
@@ -34,6 +35,7 @@
   pointer-events: all;
   outline-style: solid;
   outline-width: 1px;
+  border-radius: 0.125rem;
   cursor: pointer;
 }
 
@@ -49,7 +51,7 @@
 
 /* highlight this boundary */
 .SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect {
-    background-color: var(--color-background-hover);
+  background-color: var(--color-background-hover);
 }
 
 .SuspenseRectsRect[data-highlighted='true'] {

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`	`padding: .25rem;`
`3`	`3`	`cursor: pointer;`
`4`	`4`	`outline: 1px solid var(--color-component-name);`
	`5`	`+ border-radius: 0.25rem;`
`5`	`6`	`}`
`6`	`7`
`7`	`8`	`.SuspenseRectsContainer[data-highlighted='true'] {`
`@@ -34,6 +35,7 @@`
`34`	`35`	`pointer-events: all;`
`35`	`36`	`outline-style: solid;`
`36`	`37`	`outline-width: 1px;`
	`38`	`+ border-radius: 0.125rem;`
`37`	`39`	`cursor: pointer;`
`38`	`40`	`}`
`39`	`41`
`@@ -49,7 +51,7 @@`
`49`	`51`
`50`	`52`	`/* highlight this boundary */`
`51`	`53`	`.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect {`
`52`		`- background-color: var(--color-background-hover);`
	`54`	`+ background-color: var(--color-background-hover);`
`53`	`55`	`}`
`54`	`56`
`55`	`57`	`.SuspenseRectsRect[data-highlighted='true'] {`