@@ -21,7 +21,7 @@ function generateOverlayTemplate(
21
21
imgDiffBase64 : string ,
22
22
wasImageNotUpdatedYet : boolean
23
23
) {
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 ">
25
25
<header style="position:static">
26
26
<nav style="display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;">
27
27
<h2>${ title } - screenshot diff</h2>
@@ -35,22 +35,24 @@ function generateOverlayTemplate(
35
35
<form>
36
36
</nav>
37
37
</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>
49
51
</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 >
54
56
</div>
55
57
</div>
56
58
</div>` ;
0 commit comments