fix(react-plugin): use Radix dialog-children selector for Plotly sizing

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "funcnodes-plotly"
-version = "1.1.1"
+version = "1.1.2"
 description = ""
 readme = "README.md"
 classifiers = [

src/funcnodes_plotly/react_plugin/plugin-custom-renders.css

@@ -1 +1 @@
-.funcnodes_plotly_container{width:100%;height:100%;min-height:300px;min-width:300px}.dialogchildren .funcnodes_plotly_container{min-height:60vh}
+.funcnodes_plotly_container{width:100%;height:100%;min-height:300px;min-width:300px}.dialog-children .funcnodes_plotly_container{min-height:60vh}

src/react_plugin/package.json

@@ -9,6 +9,7 @@
         "dist"
     ],
     "scripts": {
+        "test": "node --test",
         "build": "tsc && vite build",
         "dev": "vite build --watch",
         "typecheck": "tsc --noEmit"

src/react_plugin/src/style.css

@@ -5,6 +5,6 @@
   min-width: 300px;
 }
 
-.dialogchildren .funcnodes_plotly_container {
+.dialog-children .funcnodes_plotly_container {
   min-height: 60vh;
 }

src/react_plugin/test/style.css.test.js

@@ -0,0 +1,52 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.resolve(__dirname, "..");
+
+const srcStylePath = path.join(rootDir, "src", "style.css");
+const distStylePath = path.join(rootDir, "dist", "plugin-custom-renders.css");
+const packagedStylePath = path.join(
+  rootDir,
+  "..",
+  "funcnodes_plotly",
+  "react_plugin",
+  "plugin-custom-renders.css"
+);
+
+function readTextFile(filePath) {
+  return fs.readFileSync(filePath, "utf8");
+}
+
+test("src/style.css uses Radix `dialog-children` selector for dialog sizing", () => {
+  const css = readTextFile(srcStylePath);
+  assert.match(css, /\.dialog-children\s+\.funcnodes_plotly_container\s*\{/);
+});
+
+test("src/style.css does not use deprecated `dialogchildren` selector", () => {
+  const css = readTextFile(srcStylePath);
+  assert.doesNotMatch(css, /\.dialogchildren\s+\.funcnodes_plotly_container\s*\{/);
+});
+
+test("src/style.css defines a minimum preview size", () => {
+  const css = readTextFile(srcStylePath);
+  assert.match(
+    css,
+    /\.funcnodes_plotly_container\s*\{[^}]*min-height:\s*300px;[^}]*min-width:\s*300px;[^}]*\}/s
+  );
+});
+
+test("dist/plugin-custom-renders.css matches src dialog selector", () => {
+  const css = readTextFile(distStylePath);
+  assert.match(css, /\.dialog-children\s+\.funcnodes_plotly_container\s*\{/);
+  assert.doesNotMatch(css, /\.dialogchildren\s+\.funcnodes_plotly_container\s*\{/);
+});
+
+test("funcnodes_plotly/react_plugin/plugin-custom-renders.css matches src dialog selector", () => {
+  const css = readTextFile(packagedStylePath);
+  assert.match(css, /\.dialog-children\s+\.funcnodes_plotly_container\s*\{/);
+  assert.doesNotMatch(css, /\.dialogchildren\s+\.funcnodes_plotly_container\s*\{/);
+});