@@ -256,8 +256,31 @@ export const EditorWrapper = styled.div`
256
256
257
257
const DeviceWrapperInner = styled ( Flex ) `
258
258
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
+ }
261
284
}
262
285
` ;
263
286
@@ -322,13 +345,11 @@ const DeviceWrapper = ({
322
345
useEffect ( ( ) => {
323
346
const loadWrapper = async ( ) => {
324
347
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 ) ;
328
350
} 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 ) ;
332
353
} else {
333
354
setWrapper ( ( ) => null ) ;
334
355
}
@@ -339,13 +360,13 @@ const DeviceWrapper = ({
339
360
340
361
const deviceWidth = useMemo ( ( ) => {
341
362
if ( deviceType === 'tablet' && deviceOrientation === 'portrait' ) {
342
- return 980 ;
363
+ return 850 ;
343
364
}
344
365
if ( deviceType === 'tablet' && deviceOrientation === 'landscape' ) {
345
- return 1280 ;
366
+ return 1100 ;
346
367
}
347
368
if ( deviceType === 'mobile' && deviceOrientation === 'portrait' ) {
348
- return 550 ;
369
+ return 450 ;
349
370
}
350
371
if ( deviceType === 'mobile' && deviceOrientation === 'landscape' ) {
351
372
return 1200 ;
@@ -357,8 +378,10 @@ const DeviceWrapper = ({
357
378
return (
358
379
< DeviceWrapperInner justify = "center" >
359
380
< 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%);" }
362
385
>
363
386
{ children }
364
387
</ Wrapper >
0 commit comments