fix: Widget Overflow and Show Binding issue (#35651)

appsmithorg · Aug 13, 2024 · 7c1be75 · 7c1be75
1 parent 31be835
commit 7c1be75
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/app/client/src/pages/Editor/Explorer/Entity/EntityProperties.tsx b/app/client/src/pages/Editor/Explorer/Entity/EntityProperties.tsx
@@ -16,6 +16,10 @@ import { Button } from "@appsmith/ads";
 import { getEntityProperties } from "ee/pages/Editor/Explorer/Entity/getEntityProperties";
 import store from "store";
 import { ENTITY_TYPE } from "entities/DataTree/dataTreeFactory";
+import {
+  APP_SIDEBAR_WIDTH,
+  DEFAULT_EXPLORER_PANE_WIDTH,
+} from "../../../../constants/AppConstants";
 
 const BindingContainerMaxHeight = 300;
 const EntityHeight = 36;
@@ -127,7 +131,8 @@ export function EntityProperties() {
         ref.current.style.top = top - EntityHeight + "px";
         ref.current.style.bottom = "unset";
       }
-      ref.current.style.left = "100%";
+      ref.current.style.left =
+        APP_SIDEBAR_WIDTH + DEFAULT_EXPLORER_PANE_WIDTH + "px";
     }
   }, [entityId]);
 

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -15,7 +15,6 @@ import {
   BUILDER_PATH,
   BUILDER_PATH_DEPRECATED,
 } from "ee/constants/routes/appRoutes";
-import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
 import SegmentedHeader from "./components/SegmentedHeader";
 import { useSelector } from "react-redux";
 import { getIDEViewMode } from "selectors/ideSelectors";
@@ -34,16 +33,14 @@ const EditorPaneExplorer = () => {
       }
       className="relative ide-editor-left-pane__content"
       flexDirection="column"
+      overflow="hidden"
       width={
         ideViewMode === EditorViewMode.FullScreen
           ? DEFAULT_EXPLORER_PANE_WIDTH
           : "100%"
       }
     >
       <SegmentedHeader />
-      {/** Entity Properties component is needed to render
-       the Bindings popover in the context menu. Will be removed eventually **/}
-      <EntityProperties />
       <Switch>
         <SentryRoute
           component={JSExplorer}

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
@@ -6,6 +6,7 @@ import Editor from "./Editor";
 import { useSelector } from "react-redux";
 import { getIDEViewMode } from "selectors/ideSelectors";
 import { EditorViewMode } from "ee/entities/IDE/constants";
+import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
 
 const EditorPane = () => {
   const width = useEditorPaneWidth();
@@ -27,6 +28,10 @@ const EditorPane = () => {
       height="100%"
       width={width}
     >
+      {/** Entity Properties component is necessary to render
+       the Bindings popover in the context menu.
+       Will be removed eventually **/}
+      <EntityProperties />
       <EditorPaneExplorer />
       <Editor />
     </Flex>