From c741a2f1b7d928f10ce80450c7d89a73a275e8c2 Mon Sep 17 00:00:00 2001
From: Alex Golovanov <alex@appsmith.com>
Date: Thu, 14 Nov 2024 18:42:24 +0300
Subject: [PATCH] fix: account for scrollbar width

---
 .../components/QueryResponseTab/QueryResponseTab.tsx          | 4 +++-
 .../components/QueryResponseTab/styles.ts                     | 2 ++
 .../components/PluginActionResponse/components/Table.tsx      | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/QueryResponseTab.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/QueryResponseTab.tsx
index 318bc42b629..6c88b0f559d 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/QueryResponseTab.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/QueryResponseTab.tsx
@@ -438,7 +438,9 @@ export const QueryResponseTab = (props: Props) => {
                 data={output}
                 responseType={currentContentType}
                 tableBodyHeight={
-                  responseTabHeight + RESPONSE_TABLE_HEIGHT_OFFSET
+                  responseTabHeight +
+                  RESPONSE_TABLE_HEIGHT_OFFSET -
+                  scrollbarOffset
                 }
               />
             </Styled.Response>
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts
index f560b55f864..213dc3b6a4a 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts
@@ -20,6 +20,8 @@ export const DataContainer = styled.div<{ $height: number }>`
 
 export const Response = styled.div`
   overflow: auto;
+  width: 100%;
+  height: 100%;
 `;
 
 export const StatusBar = styled.div`
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx
index ce176660518..d833e5b43e0 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx
@@ -43,7 +43,7 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>`
   display: flex;
   justify-content: space-between;
   flex-direction: column;
-  overflow: scroll;
+  overflow: auto;
   .tableWrap {
     height: 100%;
     display: block;