fix: Fix scroll into view for the navigator (#3173)

Closes https://github.com/webstudio-is/webstudio/issues/3169

## Description

Auto scroll navigation item doesn't work when item is hidden 

## Steps for reproduction

1. create lots of items in navigator, each with a nested item, see
scrollbar
2. click the last item from canvas, the inner one, so its not visible in
navigator
3. see navigator didn't scroll item into viewport because it was not
open

Navigator needs to open the item it wants to scroll to before scrolling
## Code Review

- [ ] hi @istarkov , 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:
5de6)
- [ ] 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.example`
and the `builder/env-check.js` if mandatory

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

@@ -207,7 +207,7 @@ const ItemContainer = styled(Flex, {
 });
 
 const useScrollIntoView = (
-  element: HTMLElement | null,
+  elementRef: { current: HTMLElement | null },
   {
     isDragging,
     isDropTarget,
@@ -218,8 +218,6 @@ const useScrollIntoView = (
   isDraggingRef.current = isDragging;
   const isDropTargetRef = useRef(isDropTarget);
   isDropTargetRef.current = isDropTarget;
-  const elementRef = useRef(element);
-  elementRef.current = element;
 
   // Scroll the selected button into view when selected from canvas.
   useEffect(() => {
@@ -233,7 +231,11 @@ const useScrollIntoView = (
         block: "nearest",
       });
     }
-  }, [isSelected]);
+  }, [
+    isSelected,
+    //only for the linter
+    elementRef,
+  ]);
 };
 
 export type TreeItemRenderProps<Data extends { id: string }> = {
@@ -317,7 +319,7 @@ export const TreeItemBody = <Data extends { id: string }>({
     itemSelector
   );
 
-  useScrollIntoView(itemButtonRef.current, {
+  useScrollIntoView(itemButtonRef, {
     isSelected,
     isDragging,
     isDropTarget,