@@ -255,7 +255,7 @@ export const EditorWrapper = styled.div`
255255` ;
256256
257257const DeviceWrapperInner = styled ( Flex ) `
258- margin:20px 0 0;
258+ margin:2% 0 0;
259259 .screen {
260260 overflow: auto;
261261 }
@@ -323,8 +323,8 @@ const DeviceWrapper = ({
323323const loadWrapper = async ( ) => {
324324if ( deviceType === "tablet" ) {
325325await import ( 'html5-device-mockups/dist/device-mockups.min.css' ) ;
326- const { IPad } = await import ( "react-device-mockups" ) ;
327- setWrapper ( ( ) => IPad ) ;
326+ const { IPadPro } = await import ( "react-device-mockups" ) ;
327+ setWrapper ( ( ) => IPadPro ) ;
328328} else if ( deviceType === "mobile" ) {
329329await import ( 'html5-device-mockups/dist/device-mockups.min.css' ) ;
330330const { IPhone7} = await import ( "react-device-mockups" ) ;
@@ -342,20 +342,20 @@ const DeviceWrapper = ({
342342return 700 ;
343343}
344344if ( deviceType === 'tablet' && deviceOrientation === 'landscape' ) {
345- return 1000 ;
345+ return 900 ;
346346}
347347if ( deviceType === 'mobile' && deviceOrientation === 'portrait' ) {
348- return 400 ;
348+ return 450 ;
349349}
350350if ( deviceType === 'mobile' && deviceOrientation === 'landscape' ) {
351- return 800 ;
351+ return 900 ;
352352}
353353} , [ deviceType , deviceOrientation ] ) ;
354354
355355if ( ! Wrapper ) return < > { children } </ > ;
356356
357357return (
358- < DeviceWrapperInner justify = "center" >
358+ < DeviceWrapperInner justify = "center" >
359359< Wrapper
360360orientation = { deviceOrientation }
361361width = { deviceWidth }
@@ -488,12 +488,36 @@ function EditorView(props: EditorViewProps) {
488488if ( isViewMode ) return uiComp . getView ( ) ;
489489
490490return (
491- < DeviceWrapper
492- deviceType = { editorState . deviceType }
493- deviceOrientation = { editorState . deviceOrientation }
494- >
495- { uiComp . getView ( ) }
496- </ DeviceWrapper >
491+ editorState . deviceType === "mobile" || editorState . deviceType === "tablet" ?(
492+ < div style = { {
493+ display :"flex" ,
494+ flexDirection :"row" , // Arrange side by side
495+ gap :"20px" , // Spacing between the two DeviceWrappers
496+ justifyContent :"center" , // Center horizontally
497+ alignItems :"center" , // Center vertically
498+ height :"auto" , // Full viewport height for vertical centering
499+ width :"100%" , // Full viewport width
500+
501+ } } >
502+ < DeviceWrapper
503+ deviceType = { editorState . deviceType }
504+ deviceOrientation = "portrait"
505+ >
506+ { uiComp . getView ( ) }
507+ </ DeviceWrapper >
508+
509+ < DeviceWrapper
510+ deviceType = { editorState . deviceType }
511+ deviceOrientation = "landscape"
512+ >
513+ { uiComp . getView ( ) }
514+ </ DeviceWrapper >
515+ </ div >
516+ ) :(
517+ < div >
518+ { uiComp . getView ( ) }
519+ </ div >
520+ )
497521)
498522} , [
499523uiComp ,
