From aa2a5ea10be0091d0e2ca9ff0db0f0cd1a87bb83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Piasecki?= <mpiasecki720@protonmail.com>
Date: Fri, 15 May 2026 14:29:48 +0200
Subject: [PATCH] table fixes

---
 scss/westgate/_wiki-prose.scss        | 20 ++++++++
 tests/wiki-tiptap-stack-order.test.js | 72 +++++++++++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 tests/wiki-tiptap-stack-order.test.js

diff --git a/scss/westgate/_wiki-prose.scss b/scss/westgate/_wiki-prose.scss
index bdfebe0..5d2248e 100644
--- a/scss/westgate/_wiki-prose.scss
+++ b/scss/westgate/_wiki-prose.scss
@@ -147,6 +147,10 @@
 	--wiki-fab-btn-border: rgba(216, 194, 138, 0.24);
 	--wiki-fab-danger-bg: rgba(142, 52, 56, 0.16);
 
+	--wiki-editor-table-handle-layer: 4;
+	--wiki-editor-floating-toolbar-layer: 20;
+	--wiki-editor-toolbar-layer: 30;
+
 	--wiki-article-drawer-layer: 1010;
 	--wiki-article-drawer-backdrop-layer: 1005;
 }
@@ -928,6 +932,22 @@
 	padding: 1rem !important;
 }
 
+.westgate-wiki-compose .wiki-editor__content .column-resize-handle,
+.westgate-wiki-compose .wiki-editor-table-resize-handle {
+	z-index: var(--wiki-editor-table-handle-layer, 4) !important;
+}
+
+.westgate-wiki-compose .wiki-editor__toolbar-mount,
+.westgate-wiki-compose .wiki-editor-table-sticky-row {
+	z-index: var(--wiki-editor-toolbar-layer, 30) !important;
+}
+
+.westgate-wiki-compose .wiki-editor-context-tools,
+.westgate-wiki-compose .wiki-editor-image-tools,
+.westgate-wiki-compose .wiki-editor-table-cell-popover {
+	z-index: var(--wiki-editor-floating-toolbar-layer, 20) !important;
+}
+
 .westgate-wiki-compose .form-label {
 	color: var(--wg-text-soft);
 	font-family: var(--wg-font-ui);
diff --git a/tests/wiki-tiptap-stack-order.test.js b/tests/wiki-tiptap-stack-order.test.js
new file mode 100644
index 0000000..ecedd2f
--- /dev/null
+++ b/tests/wiki-tiptap-stack-order.test.js
@@ -0,0 +1,72 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const stylesheet = fs.readFileSync(
+	path.join(__dirname, "..", "scss", "westgate", "_wiki-prose.scss"),
+	"utf8"
+);
+
+function readNumericCustomProperty(name) {
+	const pattern = new RegExp(`${name}:\\s*(\\d+)\\s*;`);
+	const match = stylesheet.match(pattern);
+	assert(match, `Expected ${name} to be defined as a numeric custom property`);
+	return Number(match[1]);
+}
+
+function ruleHasDeclaration(selector, declaration) {
+	const rulePattern = /([^{}]+)\{([^{}]*)\}/g;
+	let match;
+	while ((match = rulePattern.exec(stylesheet)) !== null) {
+		const selectors = match[1].split(",").map(value => value.trim());
+		const body = match[2];
+		if (selectors.includes(selector) && body.includes(declaration)) {
+			return true;
+		}
+	}
+	return false;
+}
+
+const tableHandleLayer = readNumericCustomProperty("--wiki-editor-table-handle-layer");
+const toolbarLayer = readNumericCustomProperty("--wiki-editor-toolbar-layer");
+const floatingToolbarLayer = readNumericCustomProperty("--wiki-editor-floating-toolbar-layer");
+
+assert(
+	tableHandleLayer < floatingToolbarLayer,
+	"TipTap table resize handles must stack below content pop-out toolbars"
+);
+assert(
+	floatingToolbarLayer < toolbarLayer,
+	"Content pop-out toolbars must stack below the persistent main/table toolbar layer"
+);
+
+[
+	".westgate-wiki-compose .wiki-editor__content .column-resize-handle",
+	".westgate-wiki-compose .wiki-editor-table-resize-handle",
+].forEach(selector => {
+	assert(
+		ruleHasDeclaration(selector, "z-index: var(--wiki-editor-table-handle-layer, 4)"),
+		`${selector} should use the table handle stack layer`
+	);
+});
+
+[
+	".westgate-wiki-compose .wiki-editor__toolbar-mount",
+	".westgate-wiki-compose .wiki-editor-table-sticky-row",
+].forEach(selector => {
+	assert(
+		ruleHasDeclaration(selector, "z-index: var(--wiki-editor-toolbar-layer, 30)"),
+		`${selector} should use the toolbar stack layer`
+	);
+});
+
+[
+	".westgate-wiki-compose .wiki-editor-context-tools",
+	".westgate-wiki-compose .wiki-editor-image-tools",
+	".westgate-wiki-compose .wiki-editor-table-cell-popover",
+].forEach(selector => {
+	assert(
+		ruleHasDeclaration(selector, "z-index: var(--wiki-editor-floating-toolbar-layer, 20)"),
+		`${selector} should use the floating toolbar stack layer`
+	);
+});