Skip to content

Commit 4ca9ce9

Browse files
Brian Vaughntrueadm
Brian Vaughn
authored andcommitted
Wrap Components and Profiler tabs with box-size style too (facebook#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.
1 parent 8b155d2 commit 4ca9ce9

File tree

3 files changed

+10
-1
lines changed

3 files changed

+10
-1
lines changed

packages/react-devtools-shared/src/devtools/views/Components/Components.css

+5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
font-family: var(--font-family-sans);
1010
}
1111

12+
.Components, .Components * {
13+
box-sizing: border-box;
14+
-webkit-font-smoothing: var(--font-smoothing);
15+
}
16+
1217
.TreeWrapper {
1318
flex: 0 0 var(--horizontal-resize-percentage);
1419
overflow: auto;

packages/react-devtools-shared/src/devtools/views/DevTools.css

-1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,5 @@
5656

5757
.DevTools, .DevTools * {
5858
box-sizing: border-box;
59-
6059
-webkit-font-smoothing: var(--font-smoothing);
6160
}

packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css

+5
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111
color: var(--color-text);
1212
}
1313

14+
.Profiler, .Profiler * {
15+
box-sizing: border-box;
16+
-webkit-font-smoothing: var(--font-smoothing);
17+
}
18+
1419
.LeftColumn {
1520
display: flex;
1621
flex-direction: column;

0 commit comments

Comments
 (0)