From ba64a2ba7224ae3ec0096327f78a3966042b87e2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 11 Mar 2020 19:12:57 -0700
Subject: [PATCH] Wrap Components and Profiler tabs with box-size style too
 (#18286)

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.
---
 .../src/devtools/views/Components/Components.css             | 5 +++++
 .../react-devtools-shared/src/devtools/views/DevTools.css    | 1 -
 .../src/devtools/views/Profiler/Profiler.css                 | 5 +++++
 3 files changed, 10 insertions(+), 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
index 7eaa396ccd40b..1261e550e003e 100644
--- 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
index 3332c35f1f677..8091c15b8484f 100644
--- 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
index e9157aa35c666..6763564e52a29 100644
--- 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;