From f8a33e669bb12ff9711db64c778f1e4e2e80bbb5 Mon Sep 17 00:00:00 2001
From: Rechcel Toledo <rechceltoledo@gmail.com>
Date: Sat, 12 Sep 2026 19:59:17 +0800
Subject: [PATCH 1/2] fix: use available Python for visual server

---
 playwright.config.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/playwright.config.js b/playwright.config.js
index 99f3bbb..8d41796 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -1,5 +1,17 @@
+const fs = require("fs");
+
 const { defineConfig, devices } = require("@playwright/test");
 
+const python =
+  process.env.PYTHON_BIN ||
+  (process.platform === "win32"
+    ? fs.existsSync(".venv\\Scripts\\python.exe")
+      ? ".venv\\Scripts\\python.exe"
+      : "python"
+    : fs.existsSync(".venv/bin/python")
+      ? ".venv/bin/python"
+      : "python");
+
 module.exports = defineConfig({
   testDir: "./tests/visual",
   timeout: 30_000,
@@ -29,7 +41,7 @@ module.exports = defineConfig({
     },
   ],
   webServer: {
-    command: "npm run build:css && .venv/bin/python -m flask --app demo.app run --no-debugger --no-reload --port 5000",
+    command: `npm run build:css && ${python} -m flask --app demo.app run --no-debugger --no-reload --port 5000`,
     url: "http://127.0.0.1:5000",
     reuseExistingServer: !process.env.CI,
     timeout: 120_000,

From dd027e126bba41a37bbaa0275b94a24156b3de0e Mon Sep 17 00:00:00 2001
From: Rechcel Toledo <rechceltoledo@gmail.com>
Date: Sat, 12 Sep 2026 20:04:37 +0800
Subject: [PATCH 2/2] test: stabilize visual screenshot dimensions

---
 tests/visual/gallery.spec.js | 50 +++++++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/tests/visual/gallery.spec.js b/tests/visual/gallery.spec.js
index a4b6a5e..1deeb8d 100644
--- a/tests/visual/gallery.spec.js
+++ b/tests/visual/gallery.spec.js
@@ -1,34 +1,48 @@
 const { test, expect } = require("@playwright/test");
 
+async function screenshotOptions(page, testInfo) {
+  const viewport = page.viewportSize();
+  const minimumHeight = testInfo.project.name === "mobile" ? 2196 : 1520;
+  const contentHeight = await page.evaluate(
+    () => document.documentElement.scrollHeight,
+  );
+  const height = Math.max(contentHeight, minimumHeight);
+
+  await page.setViewportSize({ ...viewport, height });
+
+  return {
+    animations: "disabled",
+    fullPage: false,
+    maxDiffPixelRatio: 0.05,
+  };
+}
+
 test.describe("component gallery", () => {
-  test("gallery layout remains stable", async ({ page }) => {
+  test("gallery layout remains stable", async ({ page }, testInfo) => {
     await page.goto("/");
     await expect(page).toHaveTitle(/component gallery/);
-    await expect(page).toHaveScreenshot("gallery.png", {
-      animations: "disabled",
-      fullPage: true,
-      maxDiffPixelRatio: 0.05,
-    });
+    await expect(page).toHaveScreenshot(
+      "gallery.png",
+      await screenshotOptions(page, testInfo),
+    );
   });
 
-  test("mobile layout remains stable", async ({ page }) => {
+  test("mobile layout remains stable", async ({ page }, testInfo) => {
     await page.goto("/");
-    await expect(page).toHaveScreenshot("gallery.png", {
-      animations: "disabled",
-      fullPage: true,
-      maxDiffPixelRatio: 0.05,
-    });
+    await expect(page).toHaveScreenshot(
+      "gallery.png",
+      await screenshotOptions(page, testInfo),
+    );
   });
 
-  test("dark theme remains readable", async ({ page }) => {
+  test("dark theme remains readable", async ({ page }, testInfo) => {
     await page.goto("/");
     await page.evaluate(() => {
       document.documentElement.dataset.theme = "dark";
     });
-    await expect(page).toHaveScreenshot("gallery-dark.png", {
-      animations: "disabled",
-      fullPage: true,
-      maxDiffPixelRatio: 0.05,
-    });
+    await expect(page).toHaveScreenshot(
+      "gallery-dark.png",
+      await screenshotOptions(page, testInfo),
+    );
   });
 });