fix: settings pane overflowing when number of pages increase (#31180)

app/client/src/pages/Editor/AppSettingsPane/AppSettings/DraggablePageList.tsx

@@ -7,7 +7,7 @@ import { MenuIcons } from "icons/MenuIcons";
 import React, { useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getCurrentApplicationId } from "selectors/editorSelectors";
-import { Icon } from "design-system";
+import { Flex, Icon } from "design-system";
 
 const DefaultPageIcon = MenuIcons.DEFAULT_HOMEPAGE_ICON;
 const PageIcon = MenuIcons.PAGE_ICON;
@@ -84,6 +84,7 @@ function DraggablePageList(props: {
   pages: Page[];
   selectedPage?: string;
   onPageSelect: (pageId: string) => void;
+  heightTobeReduced?: string;
 }) {
   const dispatch = useDispatch();
   const applicationId = useSelector(getCurrentApplicationId);
@@ -99,20 +100,31 @@ function DraggablePageList(props: {
   };
 
   return (
-    <DraggableList
-      ItemRenderer={({ item }: { item: Page }) => (
-        <PageListHeader
-          onPageSelect={props.onPageSelect}
-          page={item}
-          selectedPage={props.selectedPage}
-        />
-      )}
-      itemHeight={37}
-      items={props.pages}
-      keyAccessor={"pageId"}
-      onUpdate={onListOrderUpdate}
-      shouldReRender={false}
-    />
+    <Flex
+      flexDirection="column"
+      height={
+        props.heightTobeReduced
+          ? `calc(100% - ${props.heightTobeReduced})`
+          : `100%`
+      }
+      overflowX="auto"
+      px="spaces-3"
+    >
+      <DraggableList
+        ItemRenderer={({ item }: { item: Page }) => (
+          <PageListHeader
+            onPageSelect={props.onPageSelect}
+            page={item}
+            selectedPage={props.selectedPage}
+          />
+        )}
+        itemHeight={37}
+        items={props.pages}
+        keyAccessor={"pageId"}
+        onUpdate={onListOrderUpdate}
+        shouldReRender={false}
+      />
+    </Flex>
   );
 }
 

app/client/src/pages/Editor/AppSettingsPane/AppSettings/index.tsx

@@ -51,6 +51,7 @@ export interface SelectedTab {
 
 const Wrapper = styled.div`
   height: calc(100% - 48px);
+  overflow: hidden;
 `;
 
 const SectionContent = styled.div`
@@ -191,6 +192,17 @@ function AppSettings() {
     },
   ];
 
+  // 50 px height of the sectionHeader item
+  // 41px height of pages title
+  // 1px + 20px divider + spacing
+  const SECTION_HEADER_HEIGHT = 50;
+  const PAGES_TITLE_HEIGHT = 41;
+  const DIVIDER_AND_SPACING_HEIGHT = 21;
+  const heightTobeReduced =
+    SectionHeadersConfig.length * SECTION_HEADER_HEIGHT +
+    PAGES_TITLE_HEIGHT +
+    DIVIDER_AND_SPACING_HEIGHT;
+
   return (
     <Wrapper className="flex flex-row">
       <div className="w-1/2">
@@ -200,6 +212,7 @@ function AppSettings() {
         <Divider orientation={"horizontal"} />
         <PageSectionTitle>{PAGE_SETTINGS_SECTION_HEADER()}</PageSectionTitle>
         <DraggablePageList
+          heightTobeReduced={heightTobeReduced + "px"}
           onPageSelect={(pageId: string) =>
             setSelectedTab({
               type: AppSettingsTabs.Page,