Style tweaks

theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx

@@ -33,9 +33,9 @@ export const rowBg = css`
   &:before {
     height: 2px;
     right: 0;
-    bottom: -1px;
+    bottom: 0px;
     left: calc(-2px + var(--left-pad) + var(--depth) * var(--step));
-    background-color: ${transparentize(0.3, rowBgColor)};
+    background-color: ${transparentize(0.2, rowBgColor)};
   }
 `
 

theatre/studio/src/panels/OutlinePanel/BaseItem.tsx

@@ -7,14 +7,17 @@ import {transparentize, darken, opacify, lighten} from 'polished'
 import {rowBgColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
 
-export const Container = styled.li<{depth: number}>`
-  --depth: ${(props) => props.depth};
+export const Container = styled.li`
   margin: 0;
   padding: 0;
   list-style: none;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: flex-start;
 `
 
-export const BaseHeader = styled.div<{}>``
+export const BaseHeader = styled.div``
 
 const baseBg = lighten(0.05, rowBgColor)
 
@@ -25,6 +28,7 @@ export const outlinePanelTheme = {baseBg, baseFontColor, baseBorderColor}
 
 const Header = styled(BaseHeader)`
   padding-left: calc(4px + var(--depth) * 16px);
+  padding-right: 8px;
   height: 24px;
   box-sizing: border-box;
   display: flex;
@@ -155,7 +159,12 @@ const BaseItem: React.FC<{
   const canContainChildren = children !== undefined
 
   return (
-    <Container depth={depth}>
+    <Container
+      style={
+        /* @ts-ignore */
+        {'--depth': depth}
+      }
+    >
       <Header className={selectionStatus} onClick={select ?? noop}>
         <Head_IconContainer>
           {canContainChildren ? (