Skip to content

Commit d1fdd81

Browse files
authored
fix(snapshot): draw a minimum size browser window for small snapshots (#37640)
1 parent a776ce3 commit d1fdd81

File tree

2 files changed

+27
-8
lines changed

2 files changed

+27
-8
lines changed

packages/trace-viewer/src/ui/snapshotTab.css

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,16 @@
7777
box-shadow: 0 12px 28px 0 rgba(0,0,0,.2),0 2px 4px 0 rgba(0,0,0,.1);
7878
}
7979

80+
.snapshot-browser-body {
81+
height: calc(100% - var(--browser-frame-header-height));
82+
83+
/* CSS checkerboard */
84+
background: conic-gradient(#eee 25%, #ddd 0 50%, #eee 0 75%, #ddd 0) 0 0 / 40px 40px;
85+
}
86+
8087
.snapshot-switcher {
8188
width: 100%;
82-
height: calc(100% - var(--browser-frame-header-height));
89+
height: 100%;
8390
position: relative;
8491
}
8592

packages/trace-viewer/src/ui/snapshotTab.tsx

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -195,23 +195,35 @@ const SnapshotWrapper: React.FunctionComponent<React.PropsWithChildren<{
195195
const windowHeaderHeight = 40;
196196
const snapshotContainerSize = {
197197
width: snapshotInfo.viewport.width,
198-
height: snapshotInfo.viewport.height + windowHeaderHeight,
198+
height: snapshotInfo.viewport.height,
199199
};
200200

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);
202207
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,
205210
};
206211

207212
return <div ref={ref} className='snapshot-wrapper'>
208213
<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',
211216
transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
212217
}}>
213218
<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>
215227
</div>
216228
</div>;
217229
};

0 commit comments

Comments
 (0)