Merge pull request #4881 from weseek/imprv/83644-page-path-position

apply margin to Item component not using scss

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -180,7 +180,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   const buttonClass = isOpen ? 'rotate' : '';
 
   return (
-    <div className="grw-pagetree-item-wrapper">
+    <>
       <div style={opacityStyle} className="grw-pagetree-item d-flex align-items-center">
         <button
           type="button"
@@ -218,16 +218,18 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
       )}
       {
         isOpen && hasChildren() && currentChildren.map(node => (
-          <Item
-            key={node.page._id}
-            isEnableActions={isEnableActions}
-            itemNode={node}
-            isOpen={false}
-            onClickDeleteByPage={onClickDeleteByPage}
-          />
+          <div className="ml-3 mt-2">
+            <Item
+              key={node.page._id}
+              isEnableActions={isEnableActions}
+              itemNode={node}
+              isOpen={false}
+              onClickDeleteByPage={onClickDeleteByPage}
+            />
+          </div>
         ))
       }
-    </div>
+    </>
   );
 
 };

packages/app/src/styles/_page-tree.scss

@@ -1,9 +1,4 @@
 .grw-pagetree {
-  .grw-pagetree-item-wrapper {
-    margin-top: 10px;
-    margin-left: 10px;
-  }
-
   .grw-pagetree-item {
     &:hover {
       opacity: 0.7;