From 5870bd399d0dd353d481619e1ae156149b1dbde2 Mon Sep 17 00:00:00 2001
From: Vaibhav Chobisa <33133883+vaibhavchobisa@users.noreply.github.com>
Date: Tue, 9 Apr 2024 14:07:54 +0530
Subject: [PATCH] fix: rest api response box is unreachable via scroll (#29830)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Scrollbar of API response is escaping the viewport. This PR fixes the
issue.

#### Media
<img width="872" alt="Screenshot 2023-12-24 at 3 20 21 PM"
src="https://github.com/appsmithorg/appsmith/assets/33133883/4059c3e3-fb7d-4fe5-875d-16cebcede2bd">

Fixes #29534
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Datasource"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.

<!-- end of auto-generated comment: Cypress test results  -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
- Improved the visual layout and padding of the `TabPanelWrapper`
component for better readability and user interface experience.
- Updated the layout or styling of the `DebuggerLogs` component to
enhance the user interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/editorComponents/Debugger/DebuggerLogs.tsx | 1 +
 .../src/components/editorComponents/EntityBottomTabs.tsx  | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx b/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx
index 4179757d80..aa3f1f161f 100644
--- a/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx
+++ b/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx
@@ -26,6 +26,7 @@ import { getDebuggerSelectedFilter } from "selectors/debuggerSelectors";
 import { setDebuggerSelectedFilter } from "actions/debuggerActions";
 
 export const LIST_HEADER_HEIGHT = "38px";
+export const FOOTER_MARGIN = "40px";
 
 const ContainerWrapper = styled.div`
   overflow: hidden;
diff --git a/app/client/src/components/editorComponents/EntityBottomTabs.tsx b/app/client/src/components/editorComponents/EntityBottomTabs.tsx
index 81ff8e5bb8..28c16a544c 100644
--- a/app/client/src/components/editorComponents/EntityBottomTabs.tsx
+++ b/app/client/src/components/editorComponents/EntityBottomTabs.tsx
@@ -4,7 +4,7 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
 import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers";
 import { Tab, TabPanel, Tabs, TabsList } from "design-system";
 import styled from "styled-components";
-import { LIST_HEADER_HEIGHT } from "./Debugger/DebuggerLogs";
+import { LIST_HEADER_HEIGHT, FOOTER_MARGIN } from "./Debugger/DebuggerLogs";
 
 const TabPanelWrapper = styled(TabPanel)`
   margin-top: 0;
@@ -12,6 +12,12 @@ const TabPanelWrapper = styled(TabPanel)`
   &.ads-v2-tabs__panel {
     overflow: auto;
   }
+  & .t--code-editor-wrapper.codeWrapper {
+    height: calc(100% - ${FOOTER_MARGIN});
+    & .CodeMirror-scroll {
+      box-sizing: border-box;
+    }
+  }
 `;
 
 const TabsListWrapper = styled(TabsList)`