From a2d31562b4aca78fbeaa851d800ab76f53b22707 Mon Sep 17 00:00:00 2001
From: Rohit Bhati <rohit.bhati@enterprisedb.com>
Date: Fri, 25 Jul 2025 14:22:09 +0530
Subject: [PATCH 1/2] Make Section container component vertically
 resizable.#8650

---
 web/pgadmin/dashboard/static/js/Dashboard.jsx |  6 ++--
 .../static/js/components/SectionContainer.jsx | 32 ++++++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx
index 32a634c081f..2a509e8a638 100644
--- a/web/pgadmin/dashboard/static/js/Dashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@@ -1064,7 +1064,7 @@ function Dashboard({
                 {!_.isUndefined(preferences) && preferences.show_activity && (
                   <Fragment>
                     <CustomRefresh refresh={refresh} setRefresh={setRefresh}/>
-                    <SectionContainer title={gettext('Sessions')} style={{height: 'auto', minHeight: '200px', maxHeight:'400px', paddingBottom: '20px'}}>
+                    <SectionContainer title={gettext('Sessions')} style={{paddingBottom: '20px'}}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
@@ -1074,7 +1074,7 @@ function Dashboard({
                         schema={activeQSchemaObj}
                       ></PgTable>
                     </SectionContainer>
-                    <SectionContainer title={gettext('Locks')} style={{height: 'auto', minHeight: '200px',  maxHeight:'400px', paddingBottom: '20px'}}>
+                    <SectionContainer title={gettext('Locks')} style={{paddingBottom: '20px'}}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
@@ -1082,7 +1082,7 @@ function Dashboard({
                         data={(dashData?.[0]?.['locks']) || []}
                       ></PgTable>
                     </SectionContainer>
-                    <SectionContainer title={gettext('Prepared Transactions')} style={{height: 'auto', minHeight: '200px',  maxHeight:'400px', paddingBottom: '20px'}}>
+                    <SectionContainer title={gettext('Prepared Transactions')} style={{paddingBottom: '20px'}}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
diff --git a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
index 4c4bdb71740..6f682248da5 100644
--- a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
@@ -10,15 +10,15 @@ import React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
+import { Resizable } from 're-resizable';
 
 const StyledBox = styled(Box)(({theme}) => ({
   ...theme.mixins.panelBorder.all,
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden !important',
-  height: '100%',
+  height: 'auto',
   width: '100%',
-  minHeight: '400px',
   borderRadius: theme.shape.borderRadius,
   '& .SectionContainer-cardHeader': {
     backgroundColor: theme.otherVars.tableBg,
@@ -37,15 +37,25 @@ const StyledBox = styled(Box)(({theme}) => ({
 export default function SectionContainer({title, titleExtras, children, style}) {
   return (
     <StyledBox className='SectionContainer-root' style={style}>
-      <Box className='SectionContainer-cardHeader' title={title}>
-        <div className='SectionContainer-cardTitle'>{title}</div>
-        <div style={{marginLeft: 'auto'}}>
-          {titleExtras}
-        </div>
-      </Box>
-      <Box height="100%" display="flex" flexDirection="column" minHeight={0}>
-        {children}
-      </Box>
+      <Resizable
+        enable={{ bottom: true }}
+        defaultSize={{ height: 'auto', width: '100%' }}
+        minHeight={25}
+        style={{
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        <Box className='SectionContainer-cardHeader' title={title}>
+          <div className='SectionContainer-cardTitle'>{title}</div>
+          <div style={{marginLeft: 'auto'}}>
+            {titleExtras}
+          </div>
+        </Box>
+        <Box height="100%" display="flex" flexDirection="column" minHeight={0}>
+          {children}
+        </Box>
+      </Resizable>
     </StyledBox>
   );
 }

From 71070f85ca941d6d039460a9ae87ee37722c00ef Mon Sep 17 00:00:00 2001
From: Rohit Bhati <rohit.bhati@enterprisedb.com>
Date: Mon, 28 Jul 2025 18:03:50 +0530
Subject: [PATCH 2/2] Remove dual border from section container.

---
 web/pgadmin/dashboard/static/js/Dashboard.jsx               | 6 +++---
 .../dashboard/static/js/components/SectionContainer.jsx     | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx
index 2a509e8a638..6ea557168e3 100644
--- a/web/pgadmin/dashboard/static/js/Dashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@@ -1064,7 +1064,7 @@ function Dashboard({
                 {!_.isUndefined(preferences) && preferences.show_activity && (
                   <Fragment>
                     <CustomRefresh refresh={refresh} setRefresh={setRefresh}/>
-                    <SectionContainer title={gettext('Sessions')} style={{paddingBottom: '20px'}}>
+                    <SectionContainer title={gettext('Sessions')}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
@@ -1074,7 +1074,7 @@ function Dashboard({
                         schema={activeQSchemaObj}
                       ></PgTable>
                     </SectionContainer>
-                    <SectionContainer title={gettext('Locks')} style={{paddingBottom: '20px'}}>
+                    <SectionContainer title={gettext('Locks')}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
@@ -1082,7 +1082,7 @@ function Dashboard({
                         data={(dashData?.[0]?.['locks']) || []}
                       ></PgTable>
                     </SectionContainer>
-                    <SectionContainer title={gettext('Prepared Transactions')} style={{paddingBottom: '20px'}}>
+                    <SectionContainer title={gettext('Prepared Transactions')}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
diff --git a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
index 6f682248da5..6f7824c42b5 100644
--- a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
@@ -32,6 +32,12 @@ const StyledBox = styled(Box)(({theme}) => ({
       width: '100%',
     }
   },
+  // Added this to remove the borders from pgrt.
+  '& .pgrt': {
+    borderRight: 'none !important',
+    borderLeft: 'none !important',
+    borderBottom: 'none !important',
+  },
 }));
 
 export default function SectionContainer({title, titleExtras, children, style}) {