make scroll work in the real layout

apps/designer/app/designer/designer.tsx

@@ -210,7 +210,13 @@ const NavigatorPanel = ({ publish, isPreviewMode }: NavigatorPanelProps) => {
 
   return (
     <SidePanel gridArea="navigator" isPreviewMode={isPreviewMode}>
-      <Box css={{ borderRight: "1px solid $slate7", width: PANEL_WIDTH }}>
+      <Box
+        css={{
+          borderRight: "1px solid $slate7",
+          width: PANEL_WIDTH,
+          height: "100%",
+        }}
+      >
         <Navigator publish={publish} isClosable={false} />
       </Box>
     </SidePanel>

apps/designer/app/designer/features/sidebar-left/lib/navigator/navigator.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@webstudio-is/design-system";
+import { Box, Flex } from "@webstudio-is/design-system";
 import type { Instance, Publish } from "@webstudio-is/react-sdk";
 import { useSelectedInstanceData } from "~/designer/shared/nano-states";
 import { SortableTree } from "~/designer/shared/tree";
@@ -17,9 +17,9 @@ export const Navigator = ({ publish, isClosable, onClose }: NavigatorProps) => {
 
   if (rootInstance === undefined) return null;
   return (
-    <>
+    <Flex css={{ height: "100%", flexDirection: "column" }}>
       <Header title="Navigator" onClose={onClose} isClosable={isClosable} />
-      <Box css={{ padding: "$1" }}>
+      <Box css={{ flexGrow: 1, position: "relative" }}>
         <SortableTree
           root={rootInstance}
           selectedInstanceId={selectedInstanceData?.id}
@@ -43,6 +43,6 @@ export const Navigator = ({ publish, isClosable, onClose }: NavigatorProps) => {
           }}
         />
       </Box>
-    </>
+    </Flex>
   );
 };

apps/designer/app/designer/shared/tree/sortable-tree.stories.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import produce from "immer";
 import { createInstance, reparentInstanceMutable } from "~/shared/tree-utils";
 import { SortableTree } from "./sortable-tree";
+import { Box } from "@webstudio-is/design-system";
 
 export const StressTest = ({ animate }: { animate: boolean }) => {
   const [root, setRoot] = useState<Instance>(() => {
@@ -44,25 +45,26 @@ export const StressTest = ({ animate }: { animate: boolean }) => {
   >();
 
   return (
-    <SortableTree
-      height={500}
-      animate={animate}
-      root={root}
-      selectedInstanceId={selectedInstanceId}
-      onSelect={(instance) => setSelectedInstanceId(instance.id)}
-      onDragEnd={(payload) =>
-        setRoot(
-          produce((draft) =>
-            reparentInstanceMutable(
-              draft,
-              payload.instanceId,
-              payload.dropTarget.instanceId,
-              payload.dropTarget.position
+    <Box css={{ width: 300, height: 500, position: "relative" }}>
+      <SortableTree
+        animate={animate}
+        root={root}
+        selectedInstanceId={selectedInstanceId}
+        onSelect={(instance) => setSelectedInstanceId(instance.id)}
+        onDragEnd={(payload) =>
+          setRoot(
+            produce((draft) =>
+              reparentInstanceMutable(
+                draft,
+                payload.instanceId,
+                payload.dropTarget.instanceId,
+                payload.dropTarget.position
+              )
             )
           )
-        )
-      }
-    />
+        }
+      />
+    </Box>
   );
 };
 

apps/designer/app/designer/shared/tree/sortable-tree.tsx

@@ -27,7 +27,6 @@ export const SortableTree = ({
   onSelect,
   animate,
   onDragEnd,
-  height,
 }: TreeProps & {
   onDragEnd: (event: {
     instanceId: Instance["id"];
@@ -320,8 +319,13 @@ export const SortableTree = ({
   return (
     <Box
       css={{
-        height,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
         overflowY: "auto",
+        padding: "$1 0 $1 $1",
       }}
       ref={autoScrollHandlers.targetRef}
       onScroll={dropHandlers.handleScroll}