adjustments for compactness and button size

lib/ui/src/components/sidebar/RefIndicator.tsx

@@ -31,8 +31,8 @@ const IndicatorPlacement = styled.aside(({ theme }) => ({
 }));
 
 const IndicatorClickTarget = styled.button(({ theme }) => ({
-  height: 21,
-  width: 21,
+  height: 20,
+  width: 20,
   padding: 0,
   margin: 0,
   display: 'flex',
@@ -56,8 +56,8 @@ const IndicatorClickTarget = styled.button(({ theme }) => ({
     borderColor: theme.color.secondary,
   },
   svg: {
-    height: 11,
-    width: 11,
+    height: 10,
+    width: 10,
     transition: 'all 150ms ease-out',
     color: 'inherit',
   },

lib/ui/src/components/sidebar/Tree.tsx

@@ -13,8 +13,8 @@ export const Action = styled.button(({ theme }) => ({
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
-  width: 21,
-  height: 21,
+  width: 20,
+  height: 20,
   margin: 0,
   padding: 0,
   outline: 0,
@@ -37,8 +37,8 @@ export const Action = styled.button(({ theme }) => ({
     borderColor: theme.color.secondary,
   },
   svg: {
-    width: 11,
-    height: 11,
+    width: 10,
+    height: 10,
   },
 }));
 

lib/ui/src/components/sidebar/TreeNode.tsx

@@ -138,10 +138,10 @@ export const RootNode = styled.span(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  margin: '20px 20px 8px 20px',
+  margin: '16px 20px 4px 20px',
   fontSize: `${theme.typography.size.s1 - 1}px`,
   fontWeight: theme.typography.weight.black,
-  lineHeight: '16px',
+  lineHeight: '20px',
   letterSpacing: '0.35em',
   textTransform: 'uppercase',
   color: theme.color.mediumdark,