From 6ee55e2348c638fe4d316f1c5f09695829ac9e60 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 15 Jan 2024 18:00:56 +0500
Subject: [PATCH] Allow editing folder name + handle queries name overflow
 issue

---
 .../lowcoder-design/src/components/edit.tsx    | 18 ++++++++++--------
 .../src/pages/editor/bottom/BottomSidebar.tsx  |  1 +
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/packages/lowcoder-design/src/components/edit.tsx b/client/packages/lowcoder-design/src/components/edit.tsx
index 8c703b878..c093fa6a2 100644
--- a/client/packages/lowcoder-design/src/components/edit.tsx
+++ b/client/packages/lowcoder-design/src/components/edit.tsx
@@ -53,7 +53,7 @@ export const TextWrapper = styled.div`
   white-space: nowrap;
 `;
 const EditIcon = styled(Edit)`
-  visibility: hidden;
+  // visibility: hidden;
   margin-left: 8px;
   flex-shrink: 0;
 `;
@@ -130,13 +130,15 @@ export const EditText = (props: EditTextProps) => {
           <TextWrapper className={"taco-edit-text-body"} title={props.text}>
             {props.text}
           </TextWrapper>
-          <EditIcon
-            onClick={(e) => {
-              e.stopPropagation();
-              !props.disabled && setEditing(true);
-            }}
-            className={"taco-edit-text-icon"}
-          />
+          {props.forceClickIcon && !props.disabled && (
+            <EditIcon
+              onClick={(e) => {
+                e.stopPropagation();
+                !props.disabled && setEditing(true);
+              }}
+              className={"taco-edit-text-icon"}
+            />
+          )}
         </EditTextWrapper>
       )}
       {props.prefixIcon && <Prefix>{props.prefixIcon}</Prefix>}
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
index ab56ba31e..1e75ec141 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
@@ -320,6 +320,7 @@ export function BottomSidebar(props: BottomSidebarProps) {
 }
 
 const HighlightBorder = styled.div<{ $active: boolean; $foldable: boolean; $level: number }>`
+  max-width: 100%;
   flex: 1;
   display: flex;
   padding-left: ${(props) => props.$level * 20 + (props.$foldable ? 0 : 14)}px;