Merge pull request #1339 from lowcoder-org/feature-extension

Fixed folder or content title overflow in module panel and applied it…

Author: FalkWolsky

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,

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;

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()}>