fix(admin-ui): truncate long sidebar menu item names to prevent layout overflow

.mcp.json

@@ -3,6 +3,15 @@
     "webiny": {
       "command": "npx",
       "args": ["webiny-mcp", "serve", "--skills=./skills"]
+    },
+    "stdlib": {
+      "command": "npx",
+      "args": ["-y", "@webiny/stdlib", "serve"]
+    },
+    "codegraph": {
+      "type": "stdio",
+      "command": "codegraph",
+      "args": ["serve", "--mcp"]
     }
   }
 }

extensions/folderDropConfirmation/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ContentEntryListConfig } from "webiny/admin/cms/entry/list";
+
+const { Browser } = ContentEntryListConfig;
+
+const FolderDropConfirmationExtension = () => {
+    return (
+        <ContentEntryListConfig>
+            <Browser.Folder.DropConfirmation value={true} />
+        </ContentEntryListConfig>
+    );
+};
+
+export default FolderDropConfirmationExtension;

packages/admin-ui/src/Sidebar/components/SidebarContent.tsx

@@ -14,7 +14,10 @@ const SidebarContent = ({ className, children, ...props }: React.ComponentProps<
         return (
             <ScrollArea
                 data-sidebar="content"
-                className={cn("flex text-neutral-primary min-h-0 flex-1 flex-col gap-2", className)}
+                className={cn(
+                    "flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 [&_[data-radix-scroll-area-viewport]>div]:!block",
+                    className
+                )}
                 {...restProps}
             >
                 {children}

packages/admin-ui/src/Sidebar/components/SidebarRoot.tsx

@@ -85,7 +85,10 @@ const SidebarRoot = ({ side = "left", className, children, ...props }: SidebarRo
                 )}
                 {...props}
             >
-                <div data-sidebar="sidebar" className="flex h-full w-full py-xs flex-col">
+                <div
+                    data-sidebar="sidebar"
+                    className="flex h-full w-full py-xs flex-col overflow-hidden"
+                >
                     {children}
                 </div>
             </div>

packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubButton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cva } from "~/utils.js";
+import { cn, cva } from "~/utils.js";
 import type { SidebarMenuItemProps } from "./SidebarMenuRootItem.js";
 import { DivButton } from "./DivButton.js";
 import { SidebarMenuItemBadge } from "./SidebarMenuItemBadge.js";
@@ -58,14 +58,16 @@ const SidebarMenuSubButton = ({
     const sharedProps = {
         "data-sidebar": "menu-sub-button",
         "data-active": active,
-        className: variants({ variant, disabled, className }),
+        className: variants({ variant, disabled, className: cn(className, action && "pr-xl") }),
         onClick
     };
 
+    const textContent = <span className="truncate">{text}</span>;
+
     const content = to ? (
         <LinkComponent {...sharedProps} to={to} {...linkProps}>
             {icon}
-            {text}
+            {textContent}
             {badge && (typeof badge === "string" ? <SidebarMenuItemBadge text={badge} /> : badge)}
         </LinkComponent>
     ) : (
@@ -77,13 +79,13 @@ const SidebarMenuSubButton = ({
             tabIndex={variant === "group-label" ? -1 : undefined}
         >
             {icon}
-            {text}
+            {textContent}
             {badge && (typeof badge === "string" ? <SidebarMenuItemBadge text={badge} /> : badge)}
         </DivButton>
     );
 
     return (
-        <div className={"flex items-center w-full relative group/menu-sub-button"}>
+        <div className={"flex items-center w-full min-w-0 relative group/menu-sub-button"}>
             {content}
 
             {action && (

packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubItem.tsx

@@ -161,7 +161,7 @@ const SidebarMenuSubItem = ({
 
         if (!collapsible) {
             return (
-                <div className={"flex items-center"}>
+                <div className={"flex items-center min-w-0"}>
                     <SidebarMenuSubItemIndentation
                         lvl={currentLevel}
                         variant={buttonProps.variant}
@@ -177,7 +177,7 @@ const SidebarMenuSubItem = ({
                 open={isSectionExpanded}
                 onOpenChange={toggleSectionExpanded}
             >
-                <div className={"flex items-center"}>
+                <div className={"flex items-center min-w-0"}>
                     <SidebarMenuSubItemIndentation
                         lvl={currentLevel}
                         variant={buttonProps.variant}
@@ -213,7 +213,7 @@ const SidebarMenuSubItem = ({
         <>
             <li
                 data-sidebar="menu-sub-item"
-                className={cn("group/menu-sub-item relative flex", className)}
+                className={cn("group/menu-sub-item relative flex min-w-0", className)}
             >
                 {sidebarMenuSubButton}
             </li>

packages/admin-ui/src/Tree/useTree.ts

@@ -56,8 +56,6 @@ export const useTree = <TData = Record<string, any>>(props: TreeProps<TData>) =>
             });
         });
 
-        await presenter.handleDrop(newNodeTree);
-
         if (props.onDrop) {
             const { dragSourceId, dropTargetId } = options;
 
@@ -70,8 +68,14 @@ export const useTree = <TData = Record<string, any>>(props: TreeProps<TData>) =>
                 dropTarget: newTreeDto.find(node => node.id === String(options.dropTargetId))
             };
 
-            await props.onDrop(newTreeDto, dropOptions);
+            try {
+                await props.onDrop(newTreeDto, dropOptions);
+            } catch {
+                return;
+            }
         }
+
+        await presenter.handleDrop(newNodeTree);
     };
 
     const changeOpen = (newOpenIds: NodeModel<TData>["id"][]) => {

packages/app-aco/src/components/FolderTree/List/List.tsx

@@ -98,13 +98,21 @@ export const List = ({
 
                 // Abort if either folder is not found
                 if (!folder || !targetFolder) {
-                    return;
+                    throw new Error("Folder not found");
                 }
 
-                showConfirmMoveFolderDialog({
-                    folder,
-                    targetFolder,
-                    onAccept: runDrop
+                await new Promise<void>((resolve, reject) => {
+                    showConfirmMoveFolderDialog({
+                        folder,
+                        targetFolder,
+                        onAccept: async () => {
+                            await runDrop();
+                            resolve();
+                        },
+                        onClose: () => {
+                            reject(new Error("cancelled"));
+                        }
+                    });
                 });
             } else {
                 // Otherwise, perform the drop immediately

packages/app-aco/src/dialogs/useConfirmMoveFolderDialog.tsx

@@ -5,6 +5,7 @@ interface ShowDialogParams {
     folder: FolderDto;
     targetFolder: FolderDto;
     onAccept: (folder: FolderDto, targetFolder: FolderDto) => Promise<void>;
+    onClose?: () => void;
 }
 
 interface UseConfirmMoveFolderDialogResponse {
@@ -14,14 +15,15 @@ interface UseConfirmMoveFolderDialogResponse {
 export const useConfirmMoveFolderDialog = (): UseConfirmMoveFolderDialogResponse => {
     const dialogs = useDialogs();
 
-    const showDialog = ({ folder, targetFolder, onAccept }: ShowDialogParams) => {
+    const showDialog = ({ folder, targetFolder, onAccept, onClose }: ShowDialogParams) => {
         dialogs.showDialog({
             title: "Move folder",
             content: `You are about to move the folder "${folder.title}" into "${targetFolder.title}"! Are you sure you want to continue?`,
             acceptLabel: "Move folder",
             cancelLabel: "Cancel",
             loadingLabel: "Moving folder...",
-            onAccept: () => onAccept(folder, targetFolder)
+            onAccept: () => onAccept(folder, targetFolder),
+            onClose
         });
     };
 

packages/app-headless-cms/src/admin/components/ContentEntries/SidebarContent/SidebarContent.tsx

@@ -10,6 +10,7 @@ export const SidebarContent = () => {
         <div className={"flex-1 overflow-y-scroll"}>
             <FolderTree
                 folderActions={browser.folder.actions}
+                dropConfirmation={browser.folder.dropConfirmation}
                 focusedFolderId={currentFolderId}
                 onFolderClick={data => navigateToFolder(data.id)}
                 enableActions={true}

webiny.config.tsx

@@ -16,6 +16,7 @@ export const Extensions = () => {
             <Admin.Extension src={"@/extensions/customPageTypes/index.tsx"} />
             <Admin.Extension src={"@/extensions/customPageSettings/index.tsx"} />
             <Admin.Extension src={"@/extensions/customFormFieldType/index.tsx"} />
+            <Admin.Extension src={"@/extensions/folderDropConfirmation/index.tsx"} />
 
             {/*<Admin.Extension src={"@/extensions/AdminTitleLogo/AdminTitleLogo.tsx"} />*/}
             {/*<Admin.Extension src={"/extensions/AdminTheme/AdminTheme.tsx"} />*/}