Skip to content

Commit de994b9

Browse files
committed
feat: show scrollbar for overflowing images
Signed-off-by: Jakub Freisler <[email protected]>
1 parent a6a9a5f commit de994b9

File tree

1 file changed

+18
-16
lines changed

1 file changed

+18
-16
lines changed

src/support.ts

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function generateOverlayTemplate(
2121
imgDiffBase64: string,
2222
wasImageNotUpdatedYet: boolean
2323
) {
24-
return `<div class="${OVERLAY_CLASS} runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0">
24+
return `<div class="${OVERLAY_CLASS} runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column">
2525
<header style="position:static">
2626
<nav style="display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;">
2727
<h2>${title} - screenshot diff</h2>
@@ -35,22 +35,24 @@ function generateOverlayTemplate(
3535
<form>
3636
</nav>
3737
</header>
38-
<div style="margin:15px;display:flex;justify-content:space-evenly;align-items: flex-end">
39-
<div
40-
style="position:relative;background:#fff;border:solid 15px #fff"
41-
onmouseover="this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1"
42-
onmouseleave="this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0"
43-
>
44-
<h3>New screenshot:</h3>
45-
<img style="min-width:300px;width:100%;opacity:0" src="data:image/png;base64,${imgNewBase64}" />
46-
<div style="position:absolute;top:0;left:0;background:#fff">
47-
<h3>Old screenshot (hover over to see the new one):</h3>
48-
<img style="min-width:300px;width:100%" src="data:image/png;base64,${imgOldBase64}" />
38+
<div style="padding:15px;overflow:auto">
39+
<div style="display:flex;justify-content:space-evenly;align-items:flex-end">
40+
<div
41+
style="position:relative;background:#fff;border:solid 15px #fff"
42+
onmouseover="this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1"
43+
onmouseleave="this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0"
44+
>
45+
<h3>New screenshot:</h3>
46+
<img style="min-width:300px;width:100%;opacity:0" src="data:image/png;base64,${imgNewBase64}" />
47+
<div style="position:absolute;top:0;left:0;background:#fff">
48+
<h3>Old screenshot (hover over to see the new one):</h3>
49+
<img style="min-width:300px;width:100%" src="data:image/png;base64,${imgOldBase64}" />
50+
</div>
4951
</div>
50-
</div>
51-
<div style="background:#fff;border:solid 15px #fff">
52-
<h3>Diff between new and old screenshot</h3>
53-
<img style="min-width:300px;width:100%" src="data:image/png;base64,${imgDiffBase64}" />
52+
<div style="background:#fff;border:solid 15px #fff">
53+
<h3>Diff between new and old screenshot</h3>
54+
<img style="min-width:300px;width:100%" src="data:image/png;base64,${imgDiffBase64}" />
55+
</div>
5456
</div>
5557
</div>
5658
</div>`;

0 commit comments

Comments
 (0)