fix(core): sidebar renaming menu pos (#7798)

packages/frontend/core/src/modules/explorer/views/tree/node.css.ts

@@ -36,6 +36,14 @@ export const itemRoot = style({
     },
   },
 });
+export const itemRenameAnchor = style({
+  pointerEvents: 'none',
+  position: 'absolute',
+  left: 0,
+  top: -10,
+  width: 10,
+  height: 10,
+});
 export const itemContent = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -140,7 +148,6 @@ export const contentContainer = style({
 
 export const draggingContainer = style({
   background: cssVar('--affine-background-primary-color'),
-  boxShadow: cssVar('--affine-toolbar-shadow'),
   width: '200px',
   borderRadius: '6px',
 });

packages/frontend/core/src/modules/explorer/views/tree/node.tsx

@@ -11,6 +11,7 @@ import {
   useDropTarget,
 } from '@affine/component';
 import { RenameModal } from '@affine/component/rename-modal';
+import { appSidebarWidthAtom } from '@affine/core/components/app-sidebar/index.jotai';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
@@ -23,6 +24,7 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import type { To } from 'history';
+import { useAtomValue } from 'jotai';
 import {
   Fragment,
   type RefAttributes,
@@ -111,6 +113,7 @@ export const ExplorerTreeNode = ({
   // If no onClick or to is provided, clicking on the node will toggle the collapse state
   const clickForCollapse = !onClick && !to && !disabled;
   const [childCount, setChildCount] = useState(0);
+  const sidebarWidth = useAtomValue(appSidebarWidthAtom);
   const [renaming, setRenaming] = useState(defaultRenaming);
   const [lastInGroup, setLastInGroup] = useState(false);
   const rootRef = useRef<HTMLDivElement>(null);
@@ -319,11 +322,14 @@ export const ExplorerTreeNode = ({
       )}
       {renameable && renaming && (
         <RenameModal
-          open={renaming}
+          open
+          width={sidebarWidth - 32}
           onOpenChange={setRenaming}
           onRename={handleRename}
           currentName={name ?? ''}
-        />
+        >
+          <div className={styles.itemRenameAnchor} />
+        </RenameModal>
       )}
 
       <div className={styles.itemContent}>{name}</div>