fix scrolling

appsmithorg · Nov 22, 2024 · e28c56e · e28c56e
1 parent e7e38bb
commit e28c56e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/ListWithHeader.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/ListWithHeader.tsx
@@ -1,12 +1,13 @@
 import React from "react";
-import { ListHeaderContainer, ListItemContainer } from "./styles";
+import { ListHeaderContainer } from "./styles";
 import { Text } from "../../Text";
 import { Flex } from "../../Flex";
 
 interface Props {
   headerText: string;
   headerControls?: React.ReactNode;
   maxHeight?: string;
+  headerClassName?: string;
   children: React.ReactNode | React.ReactNode[];
 }
 
@@ -18,22 +19,20 @@ export const ListWithHeader = (props: Props) => {
       maxHeight={props.maxHeight}
       overflow="hidden"
     >
-      <ListHeaderContainer className="pages">
+      <ListHeaderContainer className={props.headerClassName}>
         <Text kind="heading-xs">{props.headerText}</Text>
         {props.headerControls}
       </ListHeaderContainer>
-      <ListItemContainer>
-        <Flex
-          alignItems="center"
-          flex="1"
-          flexDirection="column"
-          overflow="auto"
-          px="spaces-2"
-          width="100%"
-        >
-          {props.children}
-        </Flex>
-      </ListItemContainer>
+      <Flex
+        alignItems="center"
+        flex="1"
+        flexDirection="column"
+        overflow="auto"
+        px="spaces-2"
+        width="100%"
+      >
+        {props.children}
+      </Flex>
     </Flex>
   );
 };
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/styles.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/styles.ts
@@ -1,7 +1,8 @@
 import styled from "styled-components";
-import { Flex } from "../../Flex";
 
-export const ListItemContainer = styled(Flex)`
+export const ListItemContainer = styled.div`
+  width: 100%;
+
   & .t--entity-item {
     grid-template-columns: 0 auto 1fr auto auto auto auto auto;
     height: 32px;

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx b/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { ListWithHeader } from "@appsmith/ads";
+import { ListItemContainer, ListWithHeader } from "@appsmith/ads";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router";
 
@@ -49,16 +49,18 @@ const PagesSection = ({ onItemSelected }: { onItemSelected: () => void }) => {
     dispatch(
       createNewPageFromEntities(applicationId, name, workspaceId, instanceId),
     );
-  }, [dispatch, pages, applicationId]);
+  }, [pages, dispatch, applicationId, workspaceId, instanceId]);
 
   const onMenuClose = useCallback(() => setIsMenuOpen(false), [setIsMenuOpen]);
 
   const pageElements = useMemo(
     () =>
       pages.map((page) => (
-        <PageElement key={page.pageId} onClick={onItemSelected} page={page} />
+        <ListItemContainer key={page.pageId}>
+          <PageElement onClick={onItemSelected} page={page} />
+        </ListItemContainer>
       )),
-    [pages, location.pathname],
+    [pages, location.pathname, onItemSelected],
   );
 
   const createPageContextMenu = useMemo(() => {
@@ -84,6 +86,7 @@ const PagesSection = ({ onItemSelected }: { onItemSelected: () => void }) => {
 
   return (
     <ListWithHeader
+      headerClassName={"pages"}
       headerControls={createPageContextMenu}
       headerText={`All Pages (${pages.length})`}
       maxHeight={"300px"}