fix: Peek overlay overflowing in side by side (#33376)

## Description

Peek overlay popover was getting cut off in the left side. This PR fix
this issue.

Fixes #33370

## Automation

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

### 🔍 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/9059955985>
> Commit: a7a9a10ba4e2f0a9918f6ca8898fb9e9b321f0d1
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9059955985&attempt=1"
target="_blank">Click here!</a>

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




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

app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx

@@ -96,6 +96,11 @@ export function PeekOverlayPopUpContent(
     PEEK_OVERLAY_DELAY,
   );
 
+  const getLeftPosition = (position: DOMRect) => {
+    let left = position.right - 300;
+    if (left < 0) left = 8;
+    return left;
+  };
   return (
     <div
       className={`absolute ${zIndexLayers.PEEK_OVERLAY}`}
@@ -110,7 +115,7 @@ export function PeekOverlayPopUpContent(
         backgroundColor: "var(--ads-v2-color-bg)",
         boxShadow: "0px 0px 10px #0000001A", // color used from designs
         borderRadius: "var(--ads-v2-border-radius)",
-        left: `${props.position.left + props.position.width - 300}px`,
+        left: `${getLeftPosition(props.position)}px`,
         ...(props.position.top >= CONTAINER_MAX_HEIGHT_PX
           ? {
               bottom: `calc(100vh - ${props.position.top}px)`,