fix: added min width to wrap long page names (#10121)

* fix: added min width to wrap long page names

* fix: adjusted the width on editing for contextMenu

* style: moved the editing style in the contextMenu

* refactor: added custom classes

app/client/src/pages/Editor/Explorer/Entity/Name.tsx

@@ -234,7 +234,9 @@ export const EntityName = forwardRef(
             position={Position.TOP_LEFT}
           >
             <Wrapper
-              className={props.className}
+              className={`${
+                props.className ? props.className : ""
+              } ContextMenu`}
               onDoubleClick={props.enterEditMode}
               ref={targetRef}
             >

app/client/src/pages/Editor/PagesEditor/ContextMenu.tsx

@@ -24,7 +24,11 @@ import { Position } from "@blueprintjs/core";
 const Container = styled.div`
   padding: 12px;
   padding-top: 6px;
-  width: 280px;
+
+  /* min width to be 280px i.e. 17.5rem to wrap long page names */
+  max-width: inherit;
+  min-width: 17.5rem;
+
   background-color: ${Colors.GREY_1};
 
   h4 {
@@ -38,6 +42,14 @@ const Container = styled.div`
   main {
     padding: 4px;
   }
+
+  & .ContextMenuPopOver .ContextMenu {
+    width: 10rem;
+  }
+
+  & .editing {
+    width: 10rem;
+  }
 `;
 
 const Header = styled.div`
@@ -122,7 +134,9 @@ function ContextMenu(props: Props) {
         <Container>
           <Header>
             <PageName>
-              <EditName page={page} />
+              <div className="ContextMenuPopOver">
+                <EditName page={page} />
+              </div>
             </PageName>
             <Actions>
               <Action>

app/client/src/pages/Editor/PagesEditor/EditName.tsx

@@ -26,13 +26,13 @@ export const EditNameContainer = styled.div`
   padding-left: 4px;
 
   & > .page-list-item-edit-icon {
-    display: none;
+    visibility: hidden; /* Hide the visiblity when not hovered */
     margin-left: 8px;
     align-items: center;
   }
 
   &:hover .page-list-item-edit-icon {
-    display: flex;
+    visibility: visible; /* on Hover display the element */
   }
 
   & > div {