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

remix/app/components/ImageEditModal.tsx

@@ -1,17 +1,17 @@
-import { useState, useEffect, ChangeEvent } from "react"
 import {
-  ModalFooter,
-  ModalBody,
-  ModalHeader,
-  ButtonGroup,
   Button,
+  ButtonGroup,
   Field as FieldComponent,
   FieldLabel,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   TextInput,
 } from "@contentstack/venus-components"
+import { ChangeEvent, useEffect, useState } from "react"
 
-import type { FocalPoint, InsertResponse } from "~/types/imagevault"
 import FocalPointPicker from "~/shared-components/FocalPointPicker"
+import type { FocalPoint, InsertResponse } from "~/types/imagevault"
 
 type ImageEditModalProps = {
   fieldData: InsertResponse
@@ -86,7 +86,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

remix/app/components/ImageVaultDAM.tsx

@@ -7,18 +7,18 @@ import {
   FieldLabel,
   cbModal,
 } from "@contentstack/venus-components"
-import ImageEditModal from "./ImageEditModal"
-import FullSizeImage from "./FullSizeImage"
 import { isInsertResponse, openImageVault } from "~/utils/imagevault"
+import FullSizeImage from "./FullSizeImage"
+import ImageEditModal from "./ImageEditModal"
 
-import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
 import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
+import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
 import type { InsertResponse } from "~/types/imagevault"
+import type { Lang } from "~/types/lang"
 import type {
   EntryDataPublishDetails,
   ImageVaultDAMConfig,
 } from "~/utils/imagevault"
-import type { Lang } from "~/types/lang"
 
 export type ImageVaultDAMProps = {
   sdk: UiLocation
@@ -177,6 +177,7 @@ export default function ImageVaultDAM({
           style: {
             content: {
               maxHeight: "90dvh",
+              maxWidth: "90dvw",
               width: "auto",
             },
             overlay: {},

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 { Icon, Tooltip, cbModal } from "@contentstack/venus-components"
-import { Tooltip, Icon, 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: {},