Wrap Components and Profiler tabs with box-size style too

For the browser extension, these views get rendered into portals and so they don't inherit the box-sizing style from the .DevTools wrapper element. This causes views like the Profiler commit selector to subtly break.
facebook · Mar 12, 2020 · ab81d24 · ab81d24
1 parent 8b155d2
commit ab81d24
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.css b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
@@ -9,6 +9,11 @@
   font-family: var(--font-family-sans);
 }
 
+.Components, .Components * {
+  box-sizing: border-box;
+  -webkit-font-smoothing: var(--font-smoothing);
+}
+
 .TreeWrapper {
   flex: 0 0 var(--horizontal-resize-percentage);
   overflow: auto;

diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.css b/packages/react-devtools-shared/src/devtools/views/DevTools.css
@@ -56,6 +56,5 @@
 
 .DevTools, .DevTools * {
   box-sizing: border-box;
-
   -webkit-font-smoothing: var(--font-smoothing);
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
@@ -11,6 +11,11 @@
   color: var(--color-text);
 }
 
+.Profiler, .Profiler * {
+  box-sizing: border-box;
+  -webkit-font-smoothing: var(--font-smoothing);
+}
+
 .LeftColumn {
   display: flex;
   flex-direction: column;