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.
Brian Vaughn committed
Mar 11, 2020 at 19:12 UTC
97a8c72bf8fee0a1382497776663b58fb7129a80
3 files changed
+10
-1
packages/react-devtools-shared/src/devtools/views/Components/Components.css
+5
@@ -9,6 +9,11 @@
9
font-family: var(--font-family-sans);
10
}
11
12
+.Components, .Components * {
13
+ box-sizing: border-box;
14
+ -webkit-font-smoothing: var(--font-smoothing);
15
+}
16
+
17
.TreeWrapper {
18
flex: 0 0 var(--horizontal-resize-percentage);
19
overflow: auto;
packages/react-devtools-shared/src/devtools/views/DevTools.css
-1
@@ -56,6 +56,5 @@
56
57
.DevTools, .DevTools * {
58
box-sizing: border-box;
59
-
59
-webkit-font-smoothing: var(--font-smoothing);
60
}
packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
+5
@@ -11,6 +11,11 @@
11
color: var(--color-text);
12
}
13
14
+.Profiler, .Profiler * {
15
+ box-sizing: border-box;
16
+ -webkit-font-smoothing: var(--font-smoothing);
17
+}
18
+
19
.LeftColumn {
20
display: flex;
21
flex-direction: column;