From cd68d70d2e6e350988f5f469638016d1f8df6307 Mon Sep 17 00:00:00 2001
From: Keyur Paralkar <keyur@appsmith.com>
Date: Thu, 6 Jan 2022 16:04:36 +0530
Subject: [PATCH] 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
---
 .../src/pages/Editor/Explorer/Entity/Name.tsx  |  4 +++-
 .../pages/Editor/PagesEditor/ContextMenu.tsx   | 18 ++++++++++++++++--
 .../src/pages/Editor/PagesEditor/EditName.tsx  |  4 ++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx b/app/client/src/pages/Editor/Explorer/Entity/Name.tsx
index 7c59201f6d..242b203017 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx
+++ b/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}
             >
diff --git a/app/client/src/pages/Editor/PagesEditor/ContextMenu.tsx b/app/client/src/pages/Editor/PagesEditor/ContextMenu.tsx
index a6eddd87aa..7df8bf3859 100644
--- a/app/client/src/pages/Editor/PagesEditor/ContextMenu.tsx
+++ b/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>
diff --git a/app/client/src/pages/Editor/PagesEditor/EditName.tsx b/app/client/src/pages/Editor/PagesEditor/EditName.tsx
index 6621be0c8c..15a0a490e1 100644
--- a/app/client/src/pages/Editor/PagesEditor/EditName.tsx
+++ b/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 {