feat: Sticky actions in navigator (#4818)

## Description

https://share.descript.com/view/spOG60yRmmg

Actions in navigator now always visible even when horizontal scroll is
involved

## 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

@@ -29,6 +29,7 @@ import { TreePositionIndicator } from "./list-position-indicator";
 
 const treeNodeLevel = "--tree-node-level";
 const treeNodeOutline = "--tree-node-outline";
+const treeNodeBackgroundColor = "--tree-node-background-color";
 const treeActionOpacity = "--tree-action-opacity";
 const treeDepthBarsVisibility = "--tree-depth-bars-visibility";
 const treeDepthBarsColor = "--tree-depth-bars-color";
@@ -39,7 +40,6 @@ const ITEM_PADDING_LEFT = 8;
 const ITEM_PADDING_RIGHT = 10;
 const BARS_GAP = 16;
 const EXPAND_WIDTH = 24;
-const ACTION_WIDTH = 24;
 
 const TreeContainer = ({ children }: { children: ReactNode }) => {
   const focusManager = useFocusManager();
@@ -97,16 +97,15 @@ const NodeContainer = styled("div", {
   position: "relative",
   height: ITEM_HEIGHT,
   "&:hover, &:has(:focus-visible), &:has([aria-current=true])": {
-    backgroundColor: theme.colors.backgroundHover,
+    [treeNodeBackgroundColor]: theme.colors.backgroundHover,
+    backgroundColor: `var(${treeNodeBackgroundColor})`,
     [treeActionOpacity]: 1,
   },
   "&:has([aria-selected=true])": {
-    backgroundColor: theme.colors.backgroundItemCurrent,
+    [treeNodeBackgroundColor]: theme.colors.backgroundItemCurrent,
+    backgroundColor: `var(${treeNodeBackgroundColor})`,
     [treeDepthBarsColor]: theme.colors.borderItemChildLineCurrent,
   },
-  "&:has([data-tree-action])": {
-    paddingRight: ACTION_WIDTH,
-  },
 });
 
 const DepthBars = styled("div", {
@@ -157,14 +156,16 @@ const ActionContainer = styled("div", {
   // use opacity to hide action instead of visibility
   // to prevent focus loss while navigating with keyboard
   opacity: `var(${treeActionOpacity}, 0)`,
-  position: "absolute",
-  top: 0,
-  right: ITEM_PADDING_RIGHT,
-  width: ACTION_WIDTH,
+  position: "sticky",
+  translate: `calc(${theme.sizes.sidebarWidth} - 100%) -100%`,
+  paddingLeft: ITEM_PADDING_LEFT,
+  paddingRight: ITEM_PADDING_RIGHT,
+  left: 0,
   height: "inherit",
-  display: "flex",
+  display: "inline-flex",
   justifyContent: "center",
   alignItems: "center",
+  backgroundColor: `var(${treeNodeBackgroundColor})`,
 });
 
 const DropIndicator = ({