Reduced tree padding (left) slightly to make larger trees easier to inspect

src/devtools/views/Element.js

@@ -53,7 +53,7 @@ export default function ElementView({ index, style }: Props) {
       onDoubleClick={handleDoubleClick}
       style={{
         ...style, // "style" comes from react-window
-        paddingLeft: `${depth - baseDepth}.25rem`,
+        paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
       }}
     >
       <span className={styles.Component}>

src/devtools/views/HooksTree.css

@@ -4,7 +4,7 @@
 }
 
 .HooksNode {
-  padding-left: 1rem;
+  padding-left: 0.75rem;
 }
 
 .NameValueRow {

src/devtools/views/InspectedElementTree.css

@@ -25,5 +25,5 @@
 .Empty {
   color: var(--color-dimmer);
   font-style: italic;
-  padding-left: 1rem;
+  padding-left: 0.75rem;
 }

src/devtools/views/InspectedElementTree.js

@@ -55,6 +55,8 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
     dataType === 'boolean' ||
     value == null;
 
+  const paddingLeft = `${depth * 0.75}rem`;
+
   let children = null;
   if (isSimpleType) {
     let displayValue = value;
@@ -65,22 +67,14 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
     }
 
     children = (
-      <div
-        key="root"
-        className={styles.Item}
-        style={{ paddingLeft: `${depth}rem` }}
-      >
+      <div key="root" className={styles.Item} style={{ paddingLeft }}>
         <span className={styles.Name}>{name}</span>:{' '}
         <span className={styles.Value}>{displayValue}</span>
       </div>
     );
   } else if (value.hasOwnProperty(meta.type)) {
     children = (
-      <div
-        key="root"
-        className={styles.Item}
-        style={{ paddingLeft: `${depth}rem` }}
-      >
+      <div key="root" className={styles.Item} style={{ paddingLeft }}>
         <span className={styles.Name}>{name}</span>:{' '}
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
@@ -99,7 +93,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
         <div
           key={`${depth}-root`}
           className={styles.Item}
-          style={{ paddingLeft: `${depth}rem` }}
+          style={{ paddingLeft }}
         >
           <span className={styles.Name}>{name}</span>: <span>Array</span>
         </div>
@@ -112,7 +106,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
         <div
           key={`${depth}-root`}
           className={styles.Item}
-          style={{ paddingLeft: `${depth}rem` }}
+          style={{ paddingLeft }}
         >
           <span className={styles.Name}>{name}</span>: <span>Object</span>
         </div>

src/devtools/views/SelectedElement.css

@@ -58,7 +58,7 @@
 }
 
 .Owner {
-  padding-left: 1rem;
+  padding-left: 0.75rem;
   cursor: pointer;
 }