From 09b9071182e570c1d6a2b1f37dfdd772415f4937 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Wed, 17 Sep 2025 19:09:22 +0530
Subject: [PATCH] [Dashboards] - Add scroll wrapper (#14561)

## Summary
  - Fixed nested scrolls and sticky tabs in dashboard view
  - Drag select now auto-scrolls via ScrollWrapper context

## Changes
- Wrapped content in ScrollWrapper which provides context ID
automatically
  - Removed overflow from grid container to fix nested scrolls
---
 .../components/PageLayoutGridLayout.tsx       |  2 --
 .../components/PageLayoutRendererContent.tsx  | 25 ++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
index a123cec828..4787ede016 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
@@ -32,8 +32,6 @@ const StyledGridContainer = styled.div`
   box-sizing: border-box;
   flex: 1;
   min-height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
   position: relative;
   padding: ${({ theme }) => theme.spacing(2)};
   width: 100%;
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
index fdf258d8b2..4e81904b51 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
@@ -2,13 +2,27 @@ import { PageLayoutGridLayout } from '@/page-layout/components/PageLayoutGridLay
 import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
 import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: ${({ theme }) => theme.background.primary};
+`;
+
 const StyledTabList = styled(TabList)`
   padding-left: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledScrollWrapper = styled(ScrollWrapper)`
+  flex: 1;
+`;
+
 export const PageLayoutRendererContent = () => {
   const { currentPageLayout } = useCurrentPageLayout();
 
@@ -17,7 +31,7 @@ export const PageLayoutRendererContent = () => {
   }
 
   return (
-    <>
+    <StyledContainer>
       <StyledTabList
         tabs={currentPageLayout.tabs}
         behaveAsLinks={false}
@@ -25,7 +39,12 @@ export const PageLayoutRendererContent = () => {
           currentPageLayout.id,
         )}
       />
-      <PageLayoutGridLayout />
-    </>
+      <StyledScrollWrapper
+        componentInstanceId={`scroll-wrapper-page-layout-${currentPageLayout.id}`}
+        defaultEnableXScroll={false}
+      >
+        <PageLayoutGridLayout />
+      </StyledScrollWrapper>
+    </StyledContainer>
   );
 };