feat: use 24px item height to fit more in the navigator (#4933)

## Description

When we switched to 24px height of inputs, I forgot to update navigator
items. Currently complex components are hard to navigate because they
don't fit in the panel and you are always scrolling too much

<img width="284" alt="image"
src="https://github.com/user-attachments/assets/86800211-7290-433d-8c73-081f3fdcbb3a"
/>

<img width="283" alt="image"
src="https://github.com/user-attachments/assets/971428cf-1117-4bbf-b0e0-548e6c5bd8fa"
/>


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

packages/design-system/src/components/tree.tsx

@@ -34,7 +34,6 @@ const treeActionOpacity = "--tree-action-opacity";
 const treeDepthBarsVisibility = "--tree-depth-bars-visibility";
 const treeDepthBarsColor = "--tree-depth-bars-color";
 
-const ITEM_HEIGHT = 32;
 const ITEM_PADDING_LEFT = 8;
 // extra padding on the right to make sure scrollbar doesn't obscure anything
 const ITEM_PADDING_RIGHT = 10;
@@ -95,7 +94,7 @@ export const TreeRoot = ({ children }: { children: ReactNode }) => {
 
 const NodeContainer = styled("div", {
   position: "relative",
-  height: ITEM_HEIGHT,
+  height: theme.sizes.controlHeight,
   "&:hover, &:has(:focus-visible), &:has([aria-current=true])": {
     [treeNodeBackgroundColor]: theme.colors.backgroundHover,
     backgroundColor: `var(${treeNodeBackgroundColor})`,