@@ -195,23 +195,35 @@ const SnapshotWrapper: React.FunctionComponent<React.PropsWithChildren<{
195
195
const windowHeaderHeight = 40 ;
196
196
const snapshotContainerSize = {
197
197
width : snapshotInfo . viewport . width ,
198
- height : snapshotInfo . viewport . height + windowHeaderHeight ,
198
+ height : snapshotInfo . viewport . height ,
199
199
} ;
200
200
201
- const scale = Math . min ( measure . width / snapshotContainerSize . width , measure . height / snapshotContainerSize . height , 1 ) ;
201
+ const renderedBrowserFrameSize = {
202
+ width : Math . max ( snapshotContainerSize . width , 480 ) ,
203
+ height : Math . max ( snapshotContainerSize . height + windowHeaderHeight , 320 ) ,
204
+ } ;
205
+
206
+ const scale = Math . min ( measure . width / renderedBrowserFrameSize . width , measure . height / renderedBrowserFrameSize . height , 1 ) ;
202
207
const translate = {
203
- x : ( measure . width - snapshotContainerSize . width ) / 2 ,
204
- y : ( measure . height - snapshotContainerSize . height ) / 2 ,
208
+ x : ( measure . width - renderedBrowserFrameSize . width ) / 2 ,
209
+ y : ( measure . height - renderedBrowserFrameSize . height ) / 2 ,
205
210
} ;
206
211
207
212
return < div ref = { ref } className = 'snapshot-wrapper' >
208
213
< div className = 'snapshot-container' style = { {
209
- width : snapshotContainerSize . width + 'px' ,
210
- height : snapshotContainerSize . height + 'px' ,
214
+ width : renderedBrowserFrameSize . width + 'px' ,
215
+ height : renderedBrowserFrameSize . height + 'px' ,
211
216
transform : `translate(${ translate . x } px, ${ translate . y } px) scale(${ scale } )` ,
212
217
} } >
213
218
< BrowserFrame url = { snapshotInfo . url } />
214
- { children }
219
+ < div className = 'snapshot-browser-body' >
220
+ < div style = { {
221
+ width : snapshotContainerSize . width + 'px' ,
222
+ height : snapshotContainerSize . height + 'px' ,
223
+ } } >
224
+ { children }
225
+ </ div >
226
+ </ div >
215
227
</ div >
216
228
</ div > ;
217
229
} ;
0 commit comments