adjust layout

apps/app/src/components/Sidebar/PageTreeItem/Ellipsis.module.scss

@@ -1,9 +0,0 @@
-.rename-input-container {
-  &:global {
-    // right: 0;
-    // left: 0;
-    // display: inline-flex;
-
-    width: calc(100% - 35px);
-  }
-}

apps/app/src/components/Sidebar/PageTreeItem/RenameInput.module.scss

@@ -0,0 +1,5 @@
+@use '../../TreeItem/tree-item-variables';
+
+.rename-input-container {
+  width: calc(100% - tree-item-variables.$btn-triangle-min-width)
+}

apps/app/src/components/Sidebar/PageTreeItem/use-page-item-control.tsx

@@ -29,7 +29,7 @@ import {
 } from '../../TreeItem';
 
 
-import styles from './Ellipsis.module.scss';
+import renameInputStyles from './RenameInput.module.scss';
 
 
 type UsePageItemControl = {
@@ -184,8 +184,8 @@ export const usePageItemControl = (): UsePageItemControl => {
     }, [cancel, onRenamed, page._id, page.path, page.revision]);
 
 
-    const renameInputContainerClass = styles['rename-input-container'] ?? '';
-    const maxWidth = parentRect?.width;
+    const renameInputContainerClass = renameInputStyles['rename-input-container'] ?? '';
+    const maxWidth = (parentRect?.width ?? 0) - 12 * 2; // calculate the max-width minus the padding (12px * 2) because AutosizeInput has "box-sizing: content-box;"
 
     return (
       <>

apps/app/src/components/TreeItem/TreeItemLayout.module.scss

@@ -1,4 +1,4 @@
-@use '../ItemsTree/items-tree-variables';
+@use './tree-item-variables';
 
 // show / hide on hover
 .tree-item-layout {
@@ -19,7 +19,7 @@
 // btn-triangle
 .tree-item-layout :global {
   .btn-triangle-container {
-    min-width: 35px;
+    min-width: tree-item-variables.$btn-triangle-min-width;
   }
 
   .btn-triangle {

apps/app/src/components/TreeItem/_tree-item-variables.scss

@@ -0,0 +1 @@
+$btn-triangle-min-width: 35px;