From 7146bdc17589d7b1b4d16b619048d9e4a1eb7551 Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Mon, 29 Jul 2024 20:49:49 +0530
Subject: [PATCH] fix: Added wrap for overflowing editor content (#35262)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Horizontal scroll was not enabled in JS object side by side view. To fix
the content overflowing issue, this PR added word wrap by limiting the
width of the editor.

Fixes #35240

## Automation

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

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10143519420>
> Commit: ce0fcc909397544a013a46c3ff71ca8762e2ace5
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10143519420&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Mon, 29 Jul 2024 13:03:04 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


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

## Summary by CodeRabbit

- **Enhancements**
- Improved the layout of the JSEditor component for better
responsiveness and alignment by ensuring it takes the full width of its
container.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 app/client/src/pages/Editor/JSEditor/Form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/pages/Editor/JSEditor/Form.tsx b/app/client/src/pages/Editor/JSEditor/Form.tsx
index 8200e70ee9..81aaca7a66 100644
--- a/app/client/src/pages/Editor/JSEditor/Form.tsx
+++ b/app/client/src/pages/Editor/JSEditor/Form.tsx
@@ -369,7 +369,7 @@ function JSEditorForm({
             </StyledNotificationWrapper>
           )}
           <Wrapper>
-            <div className="flex flex-1">
+            <div className="flex flex-1 w-full">
               <SecondaryWrapper>
                 <TabbedViewContainer isExecuting={isExecutingCurrentJSAction}>
                   <Tabs