chore: Allow extra classname in ReadOnly editor (#40055)

## Description

adds a new prop to allow for extra class names

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

## Summary by CodeRabbit

- **New Features**
- Enhanced the read-only editor component with the ability to apply
custom CSS classes alongside the default styling, providing greater
flexibility and control over its appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/components/editorComponents/ReadOnlyEditor.tsx

@@ -9,6 +9,7 @@ import {
   TabBehaviour,
 } from "components/editorComponents/CodeEditor/EditorConfig";
 import LazyCodeEditor from "./LazyCodeEditor";
+import clsx from "clsx";
 
 interface Props {
   input: {
@@ -19,6 +20,7 @@ interface Props {
   folding: boolean;
   showLineNumbers?: boolean;
   isRawView?: boolean;
+  className?: string;
 }
 
 function ReadOnlyEditor(props: Props) {
@@ -40,7 +42,7 @@ function ReadOnlyEditor(props: Props) {
     isReadOnly: true,
     isRawView: props.isRawView,
     border: CodeEditorBorder.NONE,
-    className: "as-mask",
+    className: clsx(props.className, "as-mask"),
   };
 
   return <LazyCodeEditor {...editorProps} />;