Fixed selecterd element background color being cut-off when tree scrolls
This required a bit of unusual CSS but seems to work well for Firefox and Chrome. We can remove it and revisit other approaches (like PR#24) in the future if needed.
Brian Vaughn committed
Mar 1, 2019 at 08:28 UTC
8aa6f96279700ce75a1980f4cad97bafdc36eaa5
2 files changed
+26
src/devtools/views/Element.js
+9
@@ -88,9 +88,18 @@ export default function ElementView({ index, style }: Props) {
88
onDoubleClick={handleDoubleClick}
89
style={{
90
...style, // "style" comes from react-window
91
+
92
+ // Left padding presents the appearance of a nested tree structure.
93
paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
94
+
95
+ // These style overrides enable the background color to fill the full visible width,
96
+ // when combined with the CSS tweaks in Tree.
97
+ // A lot of options were considered; this seemed the one that requires the least code.
98
+ // See https://github.com/bvaughn/react-devtools-experimental/issues/9
99
width: undefined,
100
minWidth: '100%',
101
+ position: 'relative',
102
+ marginBottom: `-${style.height}px`,
103
}}
104
>
105
<span className={styles.Component} ref={ref}>
src/devtools/views/Tree.js
+17
@@ -101,6 +101,7 @@ export default function Tree(props: Props) {
101
<FixedSizeList
102
className={styles.List}
103
height={height}
104
+ innerElementType={innerElementType}
105
itemCount={numElements}
106
itemData={itemData}
107
itemSize={lineHeight}
@@ -115,3 +116,19 @@ export default function Tree(props: Props) {
116
</div>
117
);
118
}
119
+
120
+// This style override enables the background color to fill the full visible width,
121
+// when combined with the CSS tweaks in Element.
122
+// A lot of options were considered; this seemed the one that requires the least code.
123
+// See https://github.com/bvaughn/react-devtools-experimental/issues/9
124
+const innerElementType = ({ style, ...rest }) => (
125
+ <div
126
+ style={{
127
+ ...style,
128
+ display: 'inline-block',
129
+ minWidth: '100%',
130
+ width: undefined,
131
+ }}
132
+ {...rest}
133
+ />
134
+);