From a19f060f2e194e6bc05aea430b282efe58f1dded Mon Sep 17 00:00:00 2001
From: peetzweg/ <839848+peetzweg@users.noreply.github.com>
Date: Mon, 24 Nov 2025 17:56:07 +0100
Subject: [PATCH] uses flex column layout with dedicated scrollable area just
 for chains and keeping the header visible at the top (#12023)

---
 packages/apps/src/Endpoints/index.tsx     |  1 -
 packages/react-components/src/Sidebar.tsx | 25 +++++++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/apps/src/Endpoints/index.tsx b/packages/apps/src/Endpoints/index.tsx
index e82c819444..d8019dd959 100644
--- a/packages/apps/src/Endpoints/index.tsx
+++ b/packages/apps/src/Endpoints/index.tsx
@@ -424,7 +424,6 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
 
 const StyledSidebar = styled(Sidebar)`
   color: var(--color-text);
-  padding-top: 3.5rem;
 
   .customButton {
     position: absolute;
diff --git a/packages/react-components/src/Sidebar.tsx b/packages/react-components/src/Sidebar.tsx
index e30c404116..31936ffcf1 100644
--- a/packages/react-components/src/Sidebar.tsx
+++ b/packages/react-components/src/Sidebar.tsx
@@ -34,7 +34,9 @@ function Sidebar ({ buttons, children, className = '', dataTestId = '', onClose,
           onClick={onClose}
         />
       </Button.Group>
-      {children}
+      <div className='ui--Sidebar-children'>
+        {children}
+      </div>
     </StyledDiv>
   );
 }
@@ -46,10 +48,10 @@ const StyledDiv = styled.div`
   max-width: 24rem;
   min-width: 24rem;
   position: fixed;
-  padding: 1rem;
-  overflow-y: auto;
   top: 0;
   z-index: 999;
+  display: flex;
+  flex-direction: column;
 
   &.leftPosition {
     box-shadow: 6px 0px 20px 0px rgba(0, 0, 0, 0.3);
@@ -63,9 +65,20 @@ const StyledDiv = styled.div`
 
   .ui--Sidebar-buttons {
     margin: 0;
-    position: absolute;
-    right: 0.5rem;
-    top: 0.5rem;
+    padding: .75rem 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    flex-shrink: 0;
+  }
+
+  .ui--Sidebar-children {
+    padding: 0 1rem;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+    padding-bottom: 4rem;
   }
 `;