add min-width

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

@@ -251,17 +251,19 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
         ref={(c) => { drag(c); drop(c) }}
         className={`list-group-item list-group-item-action border-0 py-1 d-flex align-items-center  ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
       >
-        {hasDescendants && (
-          <button
-            type="button"
-            className={`grw-pagetree-button btn ${isOpen ? 'grw-pagetree-open' : ''}`}
-            onClick={onClickLoadChildren}
-          >
-            <div className="grw-triangle-icon">
-              <TriangleIcon />
-            </div>
-          </button>
-        )}
+        <div className="grw-triangle-container">
+          {hasDescendants && (
+            <button
+              type="button"
+              className={`grw-pagetree-button btn ${isOpen ? 'grw-pagetree-open' : ''}`}
+              onClick={onClickLoadChildren}
+            >
+              <div className="grw-triangle-icon">
+                <TriangleIcon />
+              </div>
+            </button>
+          )}
+        </div>
         { isRenameInputShown && (
           <ClosableTextInput
             isShown

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

@@ -46,13 +46,9 @@ $grw-pagetree-item-padding-left: 10px;
   }
 
   .grw-pagetree-item-container {
-    // fix the height as item height depends on the height of its children
-    > .list-group-item {
+    .grw-triangle-container {
+      min-width: 35px;
       height: 40px;
-      // fill in the blank sapce created due to the absence of triangle when the page has no descendants
-      > .grw-ml-fill-triangle {
-        margin-left: 35px;
-      }
     }
   }