From 297ae81346109c5e6b4a0cdada410d628df22cb5 Mon Sep 17 00:00:00 2001
From: Imiss-U1025 <imissu1025@gmail.com>
Date: Sat, 23 Nov 2024 16:24:44 -0500
Subject: [PATCH] Fixed folder or content title overflow in module panel and
 applied it on bottomContent.

---
 .../DraggableTree/DroppableMenuItem.tsx           |  2 +-
 .../src/pages/editor/bottom/BottomSidebar.tsx     |  2 +-
 .../src/pages/editor/right/ModulePanel.tsx        | 15 ++++++++++-----
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder/src/components/DraggableTree/DroppableMenuItem.tsx b/client/packages/lowcoder/src/components/DraggableTree/DroppableMenuItem.tsx
index 3d49e438a..7c9eac729 100644
--- a/client/packages/lowcoder/src/components/DraggableTree/DroppableMenuItem.tsx
+++ b/client/packages/lowcoder/src/components/DraggableTree/DroppableMenuItem.tsx
@@ -103,7 +103,7 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
           >
             <span style={{cursor: "default"}}>⣿</span>
           </DraggableItem>
-          <div style={{flex: 1}}>
+          <div style={{ flex: 1 , maxWidth: "calc(100% - 12px)" }}>
             {renderContent?.({
               node: item,
               isOver,
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
index 1e75ec141..03ff67c75 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
@@ -323,7 +323,7 @@ const HighlightBorder = styled.div<{ $active: boolean; $foldable: boolean; $leve
   max-width: 100%;
   flex: 1;
   display: flex;
-  padding-left: ${(props) => props.$level * 20 + (props.$foldable ? 0 : 14)}px;
+  padding-left: ${(props) => props.$level * 10 + (props.$foldable ? 0 : 14)}px;
   border-radius: 4px;
   border: 1px solid ${(props) => (props.$active ? BorderActiveColor : "transparent")};
   align-items: center;
diff --git a/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx b/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx
index 3110647a4..a24b787d2 100644
--- a/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx
@@ -38,6 +38,7 @@ const ItemWrapper = styled.div`
   }
   .module-container {
       display: flex;
+      width: 195px;
   }
   .module-icon {
     margin-right: 4px;
@@ -167,6 +168,7 @@ interface ModuleItemProps {
     setSelectedType: (id: boolean) => void;
     resComp: NodeType;
     id: string;
+    $level: number;
 }
 
 function ModuleItem(props: ModuleItemProps) {
@@ -179,7 +181,8 @@ function ModuleItem(props: ModuleItemProps) {
         selectedType,
         setSelectedType,
         resComp,
-        id
+        id,
+        $level,
     } = props;
     const dispatch = useDispatch();
     const type = resComp.isFolder;
@@ -243,8 +246,9 @@ function ModuleItem(props: ModuleItemProps) {
         >
             <div className="module-container" >
                 <ModuleDocIcon className="module-icon"/>
-                <div style={{flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)"}}>
-                    <EditText
+                <div style={{ flexGrow: 1, maxWidth: 174 - $level*10 }}>
+                        <EditText
+                            style={{ width: "100%" }}
                         text={meta.name}
                         forceClickIcon={false}
                         disabled={!isSelected || readOnly || isOverlay}
@@ -268,7 +272,7 @@ const HighlightBorder = styled.div<{ $active: boolean; $foldable: boolean; $leve
   max-width: 100%;
   flex: 1;
   display: flex;
-  padding-left: ${(props) => props.$level * 20 + (props.$foldable ? 0 : 14)}px;
+  padding-left: ${(props) => props.$level * 10 + (props.$foldable ? 0 : 14)}px;
   border-radius: 4px;
   border: 1px solid ${(props) => (props.$active ? BorderActiveColor : "transparent")};
   align-items: center;
@@ -479,7 +483,8 @@ function ModuleSidebarItem(props: ModuleSidebarItemProps) {
                                 selectedType={selectedType}
                                 setSelectedType={setSelectedType}
                                 resComp = {resComp}
-                                id = {id}
+                                id={id}
+                                $level={level}
                     />}
                 {!readOnly && !isOverlay && (
                     <EditPopover del={() => onDelete()}>