Allow editing folder name + handle queries name overflow issue

Author: raheeliftikhar5

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

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;