From 38efa6f4abfdb5aa073556971322b49ff7a620ad Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Thu, 3 Nov 2022 16:42:34 +0400
Subject: [PATCH] minor

---
 .../sidebar-left/panels/pages/pages.tsx       | 29 ++++++++++---------
 .../src/components/tree/tree-node.tsx         |  2 +-
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/apps/designer/app/designer/features/sidebar-left/panels/pages/pages.tsx b/apps/designer/app/designer/features/sidebar-left/panels/pages/pages.tsx
index db92ca0a51..dc270e09de 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/pages/pages.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/pages/pages.tsx
@@ -5,6 +5,7 @@ import {
   TreeNode,
   type TreeItemRenderProps,
   styled,
+  Flex,
 } from "@webstudio-is/design-system";
 import { type Publish } from "~/shared/pubsub";
 import {
@@ -71,7 +72,6 @@ const staticTreeProps = {
 };
 
 const MenuButton = styled(IconButton, {
-  mr: "$2",
   color: "$hint",
   "&:hover, &:focus": { color: "$hiContrast" },
   variants: {
@@ -115,18 +115,21 @@ const PagesPanel = ({
         <TreeItemBody
           {...props}
           suffix={
-            onEdit &&
-            (isEditing ? (
-              <ChevronRightIcon />
-            ) : (
-              <MenuButton
-                aria-label="Page settings"
-                parentSelected={isSelected}
-                onClick={() => onEdit(props.itemData.id)}
-              >
-                <MenuIcon />
-              </MenuButton>
-            ))
+            onEdit && (
+              <Flex css={{ mr: "$2" }} align="center">
+                {isEditing ? (
+                  <ChevronRightIcon />
+                ) : (
+                  <MenuButton
+                    aria-label="Page settings"
+                    parentSelected={isSelected}
+                    onClick={() => onEdit(props.itemData.id)}
+                  >
+                    <MenuIcon />
+                  </MenuButton>
+                )}
+              </Flex>
+            )
           }
           alwaysShowSuffix={isEditing}
           forceFocus={isEditing}
diff --git a/packages/design-system/src/components/tree/tree-node.tsx b/packages/design-system/src/components/tree/tree-node.tsx
index 71ef5202a5..bb9887876e 100644
--- a/packages/design-system/src/components/tree/tree-node.tsx
+++ b/packages/design-system/src/components/tree/tree-node.tsx
@@ -235,7 +235,7 @@ export const TreeItemBody = <Data extends { id: string }>({
   isExpanded,
   children,
   suffix,
-  suffixWidth = suffix ? "24px" : "0",
+  suffixWidth = suffix ? "$sizes$5" : "0",
   alwaysShowSuffix = false,
   forceFocus = false,
   selectionTrigger = "click",