statikbe · KarelJanVanHaute · Aug 4, 2026
diff --git a/.playwright-mcp/page-2026-08-04T13-16-47-282Z.yml b/.playwright-mcp/page-2026-08-04T13-16-47-282Z.yml
@@ -0,0 +1,15 @@
+- generic [active] [ref=e1]:
+  - banner [ref=e3]:
+    - generic [ref=e4]:
+      - img "Statik" [ref=e5]
+      - heading "Site Diff" [level=1] [ref=e6]
+  - main [ref=e7]:
+    - article [ref=e8]:
+      - generic [ref=e9]:
+        - generic [ref=e10] [cursor=pointer]:
+          - generic [ref=e11]: https://samweb.local.statik.be/nl/groepsaankoop-oosterweel
+          - generic [ref=e12]: Show
+        - generic [ref=e15]:
+          - link "Open link" [ref=e16] [cursor=pointer]:
+            - /url: https://samweb.local.statik.be/nl/groepsaankoop-oosterweel
+          - button "Retest" [ref=e18] [cursor=pointer]
diff --git a/.playwright-mcp/page-2026-08-04T13-17-28-261Z.yml b/.playwright-mcp/page-2026-08-04T13-17-28-261Z.yml
@@ -0,0 +1,15 @@
+- generic [active] [ref=f1e1]:
+  - banner [ref=f1e3]:
+    - generic [ref=f1e4]:
+      - img "Statik" [ref=f1e5]
+      - heading "Site Diff" [level=1] [ref=f1e6]
+  - main [ref=f1e7]:
+    - article [ref=f1e8]:
+      - generic [ref=f1e9]:
+        - generic [ref=f1e10] [cursor=pointer]:
+          - generic [ref=f1e11]: https://samweb.local.statik.be/nl/groepsaankoop-oosterweel
+          - generic [ref=f1e12]: Show
+        - generic [ref=f1e15]:
+          - link "Open link" [ref=f1e16] [cursor=pointer]:
+            - /url: https://samweb.local.statik.be/nl/groepsaankoop-oosterweel
+          - button "Retest" [ref=f1e18] [cursor=pointer]
diff --git a/clint/src/frontend/css/components/report.css b/clint/src/frontend/css/components/report.css
@@ -363,7 +363,10 @@
   background: var(--color-primary-hover, #fece00);
   color: var(--color-black);
 }
-.report-diff img {
+/* Don't touch the images owned by image-compare-viewer: it sizes them itself
+   (.icv__img-b keeps height:100%/width:auto so it gets clipped, not scaled,
+   while the overlay wrapper width shrinks as the handle moves). */
+.report-diff img:not(.icv__img) {
   max-width: 100%;
   height: auto;
   display: block;

diff --git a/clint/src/frontend/css/components/toggle.css b/clint/src/frontend/css/components/toggle.css
@@ -1,5 +1,5 @@
 [data-s-toggle-target] {
-  &[aria-expanded='true'] {
+  &[aria-expanded="true"] {
     > .icon {
       transform: rotateZ(180deg);
     }
@@ -9,7 +9,7 @@
     }
   }
 
-  &[aria-expanded='false'] {
+  &[aria-expanded="false"] {
     .js-toggle-expanded-text {
       display: none;
     }
@@ -30,7 +30,7 @@
     @apply relative;
 
     &::after {
-      content: '';
+      content: "";
       @apply absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-b from-white/0 to-white;
     }
   }
@@ -40,7 +40,7 @@
   @apply flex items-center space-x-2;
   &::before {
     @apply inline-icon;
-    mask-image: url('../../icons/visibility.svg');
+    mask-image: url("../../icons/visibility.svg");
   }
 
   &::before {
@@ -52,24 +52,24 @@
   @apply flex items-center space-x-2;
   &::before {
     @apply inline-icon;
-    mask-image: url('../../icons/visibility-off.svg');
+    mask-image: url("../../icons/visibility-off.svg");
   }
 
   &::before {
     @apply mr-2;
   }
 }
 
-.toggle-open {
+/* .toggle-open {
   &::before {
     @apply inline-icon mr-0;
-    mask-image: url('../../icons/chevron-down.svg');
+    mask-image: url("../../icons/chevron-down.svg");
   }
-}
+} */
 
-.toggle-close {
+/* .toggle-close {
   &::before {
     @apply inline-icon mr-0;
     mask-image: url('../../icons/chevron-up.svg');
   }
-}
+} */
diff --git a/clint/templates/updateDiff.html b/clint/templates/updateDiff.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -30,7 +30,14 @@ <h1 class="report-header__title">Site Diff</h1>
               <span class="toggle-close js-toggle-expanded-text">Hide</span>
             </span>
             <svg class="report-chevron" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              <path
+                d="M7 10l5 5 5-5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
           </div>
           <div class="report-card__actions">
@@ -50,14 +57,14 @@ <h1 class="report-header__title">Site Diff</h1>
         </div>
         <div class="report-card__body report-diff hidden" id="{{id}}" data-s-toggle data-s-toggle-animation="true">
           <div class="report-issue">
-            <button type="button" class="report-diff-toggle" data-s-toggle-target="diffmap-{{id}}">
-              <span class="js-toggle-collapsed-text">Show diff map</span>
-              <span class="js-toggle-expanded-text">Hide diff map</span>
-            </button>
-            <div class="hidden" id="diffmap-{{id}}" data-s-toggle data-s-toggle-animation="true">
+            <div>
               <img src="{{& diffImage }}" alt="Diff Image" />
             </div>
-            <div class="image-compare">
+            <button type="button" class="report-diff-toggle" data-s-toggle-target="compare-{{id}}">
+              <span class="js-toggle-collapsed-text">Show compare</span>
+              <span class="js-toggle-expanded-text">Hide compare</span>
+            </button>
+            <div class="image-compare" id="compare-{{id}}" data-s-toggle data-s-toggle-animation="true">
               <img src="{{& beforeImage }}" alt="Before Image" />
               <img src="{{& afterImage }}" alt="After Image" />
             </div>