fix: added fix for the height of the model content to not overflow on smaller devices

rte/components/ImageEditModal.tsx

@@ -1,20 +1,20 @@
-import React, { useState, useEffect, ChangeEvent } from "react"
 import {
-  ModalFooter,
-  ModalBody,
-  ModalHeader,
-  ButtonGroup,
   Button,
+  ButtonGroup,
   Field,
   FieldLabel,
-  TextInput,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Select,
+  TextInput,
 } from "@contentstack/venus-components"
+import React, { ChangeEvent, useEffect, useState } from "react"
 import { Path } from "slate"
 
 import type {
-  IRteParam,
   IRteElementType,
+  IRteParam,
 } from "@contentstack/app-sdk/dist/src/RTE/types"
 import FocalPointPicker from "~/shared-components/FocalPointPicker"
 
@@ -166,7 +166,9 @@ export default function ImageEditModal({
           gap: "1rem",
           alignItems: "center",
           width: "auto",
-          maxHeight: "none",
+          maxHeight: "calc(90dvh - 124px)", // 124px is the height of the header and footer
+          maxWidth: "90dvw",
+          overflow: "auto",
         }}
       >
         <FocalPointPicker

rte/components/ImageElement.tsx

@@ -1,13 +1,13 @@
-import React, { useRef, useCallback, PropsWithChildren } from "react"
-import { Tooltip, Icon, cbModal } from "@contentstack/venus-components"
+import { Icon, Tooltip, cbModal } from "@contentstack/venus-components"
+import React, { PropsWithChildren, useCallback, useRef } from "react"
 
 import { Resizable } from "re-resizable"
 import EmbedBtn from "./EmbedBtn"
 import ImageEditModal from "./ImageEditModal"
 
 import type {
-  IRteParam,
   IRteElementType,
+  IRteParam,
 } from "@contentstack/app-sdk/dist/src/RTE/types"
 import type { InsertResponse } from "~/types/imagevault"
 
@@ -38,6 +38,7 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
         style: {
           content: {
             maxHeight: "90dvh",
+            maxWidth: "90dvw",
             width: "auto",
           },
           overlay: {},