@@ -256,8 +256,31 @@ export const EditorWrapper = styled.div`
256256
257257const DeviceWrapperInner = styled ( Flex ) `
258258 margin: 2% 0 0;
259- .screen {
260- overflow: auto;
259+ .device-mockup.portrait {
260+ > div:first-child {
261+ > div:first-child {
262+ > div:first-child {
263+ > div:nth-child(2) {
264+ display: block !important;
265+ overflow: hidden auto !important;
266+ }
267+ }
268+ }
269+ }
270+ }
271+ .device-mockup.landscape {
272+ > div:first-child {
273+ > div:first-child {
274+ > div:first-child {
275+ > div:nth-child(2) {
276+ > div:first-child {
277+ display: block !important;
278+ overflow: hidden auto !important;
279+ }
280+ }
281+ }
282+ }
283+ }
261284 }
262285` ;
263286
@@ -322,13 +345,11 @@ const DeviceWrapper = ({
322345 useEffect ( ( ) => {
323346 const loadWrapper = async ( ) => {
324347 if ( deviceType === "tablet" ) {
325- await import ( 'html5-device-mockups/dist/device-mockups.min.css' ) ;
326- const { IPadPro } = await import ( "react-device-mockups" ) ;
327- setWrapper ( ( ) => IPadPro ) ;
348+ const { IPadMockup } = await import ( "react-device-mockup" ) ;
349+ setWrapper ( ( ) => IPadMockup ) ;
328350 } else if ( deviceType === "mobile" ) {
329- await import ( 'html5-device-mockups/dist/device-mockups.min.css' ) ;
330- const { IPhone7 } = await import ( "react-device-mockups" ) ;
331- setWrapper ( ( ) => IPhone7 ) ;
351+ const { IPhoneMockup } = await import ( "react-device-mockup" ) ;
352+ setWrapper ( ( ) => IPhoneMockup ) ;
332353 } else {
333354 setWrapper ( ( ) => null ) ;
334355 }
@@ -339,13 +360,13 @@ const DeviceWrapper = ({
339360
340361 const deviceWidth = useMemo ( ( ) => {
341362 if ( deviceType === 'tablet' && deviceOrientation === 'portrait' ) {
342- return 980 ;
363+ return 850 ;
343364 }
344365 if ( deviceType === 'tablet' && deviceOrientation === 'landscape' ) {
345- return 1280 ;
366+ return 1100 ;
346367 }
347368 if ( deviceType === 'mobile' && deviceOrientation === 'portrait' ) {
348- return 550 ;
369+ return 450 ;
349370 }
350371 if ( deviceType === 'mobile' && deviceOrientation === 'landscape' ) {
351372 return 1200 ;
@@ -357,8 +378,10 @@ const DeviceWrapper = ({
357378 return (
358379 < DeviceWrapperInner justify = "center" >
359380 < Wrapper
360- orientation = { deviceOrientation }
361- width = { deviceWidth }
381+ isLandscape = { deviceOrientation === 'landscape' }
382+ screenWidth = { deviceWidth }
383+ className = { `device-mockup ${ deviceOrientation === 'landscape' && deviceType === 'mobile' ? 'landscape' : 'portrait' } ` }
384+ frameColor = { "background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);" }
362385 >
363386 { children }
364387 </ Wrapper >
0 commit comments