diff --git a/.playwright-mcp/page-2026-08-04T13-16-47-282Z.yml b/.playwright-mcp/page-2026-08-04T13-16-47-282Z.yml new file mode 100644 index 00000000..490661ab --- /dev/null +++ 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] \ No newline at end of file diff --git a/.playwright-mcp/page-2026-08-04T13-17-28-261Z.yml b/.playwright-mcp/page-2026-08-04T13-17-28-261Z.yml new file mode 100644 index 00000000..8968a057 --- /dev/null +++ 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] \ No newline at end of file diff --git a/clint/src/frontend/css/components/report.css b/clint/src/frontend/css/components/report.css index a22956d6..d41d3719 100644 --- 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 index cc949260..8b9a0320 100644 --- 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,7 +52,7 @@ @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 { @@ -60,16 +60,16 @@ } } -.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 index 3e31fb30..0e220508 100644 --- a/clint/templates/updateDiff.html +++ b/clint/templates/updateDiff.html @@ -1,4 +1,4 @@ - +
@@ -30,7 +30,14 @@