fix: Modal auto scroll and check box not being able to be interacted in preview mode in modal (#33122)

[![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX1XsTZQu0glj3SUpQb6UHrbpOrVIEtTtTw%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=nHxA30y)
## Description
> [!TIP]  
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._


Fixes #32466
_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.Anvil"

### 🔍 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/8919851918>
> Commit: c0d750008e8865b2f7f7f79664be6b909b31bbb4
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8919851918&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
- [ ] No

app/client/src/layoutSystems/anvil/common/hooks/detachedWidgetHooks.ts

@@ -57,7 +57,7 @@ export function useHandleDetachedWidgetSelect(widgetId: string) {
     };
 
     // Registering and unregistering listeners
-    if (element) {
+    if (element && !isPreviewMode) {
       element.addEventListener("click", handleWidgetSelect, {
         passive: false,
         capture: false,

app/client/src/layoutSystems/anvil/editor/canvasArenas/hooks/useAnvilDnDEvents.ts

@@ -4,6 +4,7 @@ import type { AnvilHighlightingCanvasProps } from "layoutSystems/anvil/editor/ca
 import type { AnvilHighlightInfo } from "layoutSystems/anvil/utils/anvilTypes";
 import { useAnvilDnDEventCallbacks } from "./useAnvilDnDEventCallbacks";
 import { removeDisallowDroppingsUI } from "../utils/utils";
+import { useCanvasDragToScroll } from "layoutSystems/common/canvasArenas/useCanvasDragToScroll";
 
 /**
  * Hook to handle Anvil DnD events
@@ -20,7 +21,11 @@ export const useAnvilDnDEvents = (
     isCurrentDraggedCanvas,
     isDragging,
   } = anvilDragStates;
-
+  useCanvasDragToScroll(
+    anvilDnDListenerRef,
+    isCurrentDraggedCanvas,
+    isDragging,
+  );
   /**
    * Ref to store highlights derived in real time once dragging starts
    */

app/client/src/widgets/wds/constants.ts

@@ -1,3 +1,4 @@
+import { getCanvasClassName } from "utils/generators";
 import { anvilWidgets } from "widgets/anvil/constants";
 
 export const WDS_V2_WIDGET_MAP = {
@@ -25,5 +26,5 @@ export const WDS_V2_WIDGET_MAP = {
   // Anvil layout widgets
   ZONE_WIDGET: anvilWidgets.ZONE_WIDGET,
 };
-
-export const WDS_MODAL_WIDGET_CLASSNAME = "appsmith-modal-body";
+// getCanvasClassName adds class name to denote that this is scrollable canvas
+export const WDS_MODAL_WIDGET_CLASSNAME = `appsmith-modal-body ${getCanvasClassName()}`;