@yuneta/gobj-ui 7.23.40 → 7.23.42

package/dist/gobj-ui.cjs.js

@@ -44,6 +44,75 @@ maplibre_gl = __toESM(maplibre_gl, 1);
 let uplot = require("uplot");
 uplot = __toESM(uplot, 1);
 let _antv_g6 = require("@antv/g6");
+//#region src/bulma_tint.js
+/***********************************************************************
+*          bulma_tint.js
+*
+*      Bulma's "soften this colour" modifier, applied so that it cannot
+*      be applied alone.
+*
+*      WHY THIS IS A FUNCTION AND NOT A STRING.  'light' is one of
+*      Bulma's colours, so `is-light` is BOTH a colour and the modifier
+*      that softens another one.  A compound selector may match the same
+*      class twice, so `.tag.is-light.is-light` matches an element that
+*      carries the class ONCE -- and that rule sets the text to
+*      var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+*      referenced four times in bulma.css, declared zero times.  The
+*      colour declaration is then invalid while the background still
+*      resolves, so what is left on screen is a pill with no readable
+*      label.
+*
+*      Two selectors of Bulma 1 reach that undefined variable:
+*
+*          .tag.is-light.is-light
+*          .notification.is-light.is-light
+*
+*      It cost three unreadable chips in the schema editor -- the topic
+*      count, the schema version, and every column flag with no colour of
+*      its own ('writable', 'image', 'wild'...).  They read as empty
+*      pills, which looks like a bug in the DATA and is a missing CSS
+*      variable.
+*
+*      The neutral chip is a bare element with no modifier at all: it
+*      takes --bulma-background-l and --bulma-text-l, follows the theme
+*      and stays legible in both.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var TINTABLE = [
+	"primary",
+	"link",
+	"info",
+	"success",
+	"warning",
+	"danger",
+	"black",
+	"dark",
+	"white",
+	"text",
+	"ghost"
+];
+/***************************************************************
+*  A softened colour, or nothing.
+*
+*      yui_tint("warning")     -> "is-warning is-light"
+*      yui_tint("is-warning")  -> "is-warning is-light"
+*      yui_tint("light")       -> ""     (there is nothing to soften)
+*      yui_tint("")            -> ""
+*      yui_tint(undefined)     -> ""
+*
+*  Anything it does not recognise comes back empty rather than being
+*  passed through: a class this function cannot vouch for is exactly the
+*  case it exists to stop.
+***************************************************************/
+function yui_tint(colour) {
+	if (typeof colour !== "string") return "";
+	const name = colour.trim().replace(/^is-/, "");
+	if (TINTABLE.indexOf(name) < 0) return "";
+	return `is-${name} is-light`;
+}
+//#endregion
 //#region src/shell_focus_trap.js
 /***********************************************************************
 *          shell_focus_trap.js
@@ -2858,7 +2927,7 @@ function show_notification(shell, kind, message, opts) {
 	let $note = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
-			class: `TOAST notification yui-notification is-${kind} is-light`,
+			class: `TOAST notification yui-notification ${yui_tint(kind)}`,
 			role: kind === "danger" ? "alert" : "status"
 		},
 		[["button", {
@@ -23149,14 +23218,14 @@ function build_ui$5(gobj) {
 		"div",
 		{
 			class: "C_YUI_TREEDB_TOPIC_WITH_FORM",
-			style: "height:100%;"
+			style: "height:100%; min-height:0; display:flex; flex-direction:column;"
 		},
 		[["div", {
 			class: "TREEDB_TABLE_TOOLBAR toolbar_tabulator_table m-1",
-			style: "display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;"
+			style: "flex:none; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;"
 		}], ["div", {
 			id: `${table_id}`,
-			style: "margin-top:0px !important;"
+			style: "margin-top:0px !important; flex:1 1 auto; min-height:0;"
 		}]]
 	]);
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_checkbox") && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_selection_bar")) {
@@ -23166,6 +23235,7 @@ function build_ui$5(gobj) {
 			on_clear: () => (0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CLEAR_SELECTION", {}, gobj)
 		});
 		(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "selection_bar", bar);
+		bar.$el.style.flex = "none";
 		$container.insertBefore(bar.$el, $container.querySelector(`#${table_id}`));
 	}
 	let $toolbar_slot = $container.querySelector(".toolbar_tabulator_table");
@@ -62413,7 +62483,7 @@ function open_card(gobj, logical, title, icon, tags, event, kw) {
 	let $tags = tags.map((tag) => {
 		return [
 			"span",
-			{ class: `${logical}_TAG tag ${tag.style || "is-light"}` },
+			{ class: `${logical}_TAG tag ${tag.style || ""}`.trimEnd() },
 			tag.i18n ? [[
 				"span",
 				{ i18n: tag.i18n },
@@ -62560,7 +62630,7 @@ function render_topics(gobj, $body) {
 						topic.system_topic ? [
 							"span",
 							{
-								class: "SCHEMA_TOPIC_SYSTEM tag is-light ml-2",
+								class: "SCHEMA_TOPIC_SYSTEM tag ml-2",
 								i18n: "system"
 							},
 							(0, i18next.t)("system")
@@ -62909,7 +62979,7 @@ function column_row(gobj, topic, col, index, readonly, twice) {
 	let $flags = flags.map((flag) => {
 		return [
 			"span",
-			{ class: `SCHEMA_COL_FLAG tag is-light ${flag_style(flag)}` },
+			{ class: `SCHEMA_COL_FLAG tag ${yui_tint(flag_style(flag))}`.trimEnd() },
 			`${flag}`
 		];
 	});

package/dist/gobj-ui.es.js

@@ -39,6 +39,75 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
+//#region src/bulma_tint.js
+/***********************************************************************
+*          bulma_tint.js
+*
+*      Bulma's "soften this colour" modifier, applied so that it cannot
+*      be applied alone.
+*
+*      WHY THIS IS A FUNCTION AND NOT A STRING.  'light' is one of
+*      Bulma's colours, so `is-light` is BOTH a colour and the modifier
+*      that softens another one.  A compound selector may match the same
+*      class twice, so `.tag.is-light.is-light` matches an element that
+*      carries the class ONCE -- and that rule sets the text to
+*      var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+*      referenced four times in bulma.css, declared zero times.  The
+*      colour declaration is then invalid while the background still
+*      resolves, so what is left on screen is a pill with no readable
+*      label.
+*
+*      Two selectors of Bulma 1 reach that undefined variable:
+*
+*          .tag.is-light.is-light
+*          .notification.is-light.is-light
+*
+*      It cost three unreadable chips in the schema editor -- the topic
+*      count, the schema version, and every column flag with no colour of
+*      its own ('writable', 'image', 'wild'...).  They read as empty
+*      pills, which looks like a bug in the DATA and is a missing CSS
+*      variable.
+*
+*      The neutral chip is a bare element with no modifier at all: it
+*      takes --bulma-background-l and --bulma-text-l, follows the theme
+*      and stays legible in both.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var TINTABLE = [
+	"primary",
+	"link",
+	"info",
+	"success",
+	"warning",
+	"danger",
+	"black",
+	"dark",
+	"white",
+	"text",
+	"ghost"
+];
+/***************************************************************
+*  A softened colour, or nothing.
+*
+*      yui_tint("warning")     -> "is-warning is-light"
+*      yui_tint("is-warning")  -> "is-warning is-light"
+*      yui_tint("light")       -> ""     (there is nothing to soften)
+*      yui_tint("")            -> ""
+*      yui_tint(undefined)     -> ""
+*
+*  Anything it does not recognise comes back empty rather than being
+*  passed through: a class this function cannot vouch for is exactly the
+*  case it exists to stop.
+***************************************************************/
+function yui_tint(colour) {
+	if (typeof colour !== "string") return "";
+	const name = colour.trim().replace(/^is-/, "");
+	if (TINTABLE.indexOf(name) < 0) return "";
+	return `is-${name} is-light`;
+}
+//#endregion
 //#region src/shell_focus_trap.js
 /***********************************************************************
 *          shell_focus_trap.js
@@ -2853,7 +2922,7 @@ function show_notification(shell, kind, message, opts) {
 	let $note = createElement2([
 		"div",
 		{
-			class: `TOAST notification yui-notification is-${kind} is-light`,
+			class: `TOAST notification yui-notification ${yui_tint(kind)}`,
 			role: kind === "danger" ? "alert" : "status"
 		},
 		[["button", {
@@ -23144,14 +23213,14 @@ function build_ui$5(gobj) {
 		"div",
 		{
 			class: "C_YUI_TREEDB_TOPIC_WITH_FORM",
-			style: "height:100%;"
+			style: "height:100%; min-height:0; display:flex; flex-direction:column;"
 		},
 		[["div", {
 			class: "TREEDB_TABLE_TOOLBAR toolbar_tabulator_table m-1",
-			style: "display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;"
+			style: "flex:none; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;"
 		}], ["div", {
 			id: `${table_id}`,
-			style: "margin-top:0px !important;"
+			style: "margin-top:0px !important; flex:1 1 auto; min-height:0;"
 		}]]
 	]);
 	if (gobj_read_bool_attr(gobj, "with_checkbox") && gobj_read_bool_attr(gobj, "with_selection_bar")) {
@@ -23161,6 +23230,7 @@ function build_ui$5(gobj) {
 			on_clear: () => gobj_send_event(gobj, "EV_CLEAR_SELECTION", {}, gobj)
 		});
 		gobj_write_attr(gobj, "selection_bar", bar);
+		bar.$el.style.flex = "none";
 		$container.insertBefore(bar.$el, $container.querySelector(`#${table_id}`));
 	}
 	let $toolbar_slot = $container.querySelector(".toolbar_tabulator_table");
@@ -62408,7 +62478,7 @@ function open_card(gobj, logical, title, icon, tags, event, kw) {
 	let $tags = tags.map((tag) => {
 		return [
 			"span",
-			{ class: `${logical}_TAG tag ${tag.style || "is-light"}` },
+			{ class: `${logical}_TAG tag ${tag.style || ""}`.trimEnd() },
 			tag.i18n ? [[
 				"span",
 				{ i18n: tag.i18n },
@@ -62555,7 +62625,7 @@ function render_topics(gobj, $body) {
 						topic.system_topic ? [
 							"span",
 							{
-								class: "SCHEMA_TOPIC_SYSTEM tag is-light ml-2",
+								class: "SCHEMA_TOPIC_SYSTEM tag ml-2",
 								i18n: "system"
 							},
 							t("system")
@@ -62904,7 +62974,7 @@ function column_row(gobj, topic, col, index, readonly, twice) {
 	let $flags = flags.map((flag) => {
 		return [
 			"span",
-			{ class: `SCHEMA_COL_FLAG tag is-light ${flag_style(flag)}` },
+			{ class: `SCHEMA_COL_FLAG tag ${yui_tint(flag_style(flag))}`.trimEnd() },
 			`${flag}`
 		];
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.40",
+  "version": "7.23.42",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/bulma_is_light.test.js

@@ -0,0 +1,160 @@
+/***********************************************************************
+ *          bulma_is_light.test.js
+ *
+ *      `is-light` MUST NEVER BE THE ONLY BULMA COLOUR ON AN ELEMENT.
+ *
+ *      'light' is one of Bulma's colours, so `is-light` is both a colour
+ *      and the "soften it" modifier.  A compound selector may match the
+ *      same class twice, so `.tag.is-light.is-light` matches an element
+ *      that carries the class ONCE -- and that rule sets the text to
+ *      var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+ *      referenced four times in bulma.css, declared zero times.  The
+ *      colour declaration is then invalid while the background still
+ *      resolves, and what is left on screen is a pill with no readable
+ *      label.
+ *
+ *      Two selectors in Bulma 1 reach that undefined variable:
+ *
+ *          .tag.is-light.is-light
+ *          .notification.is-light.is-light
+ *
+ *      It cost three unreadable chips in the schema editor -- the topic
+ *      count, the schema version, and every column flag without a colour
+ *      of its own ('writable', 'image', 'wild'...).  They looked like
+ *      empty pills, which reads as a rendering bug in the data and is a
+ *      missing CSS variable.
+ *
+ *      THIS IS A SOURCE SCAN AND NOT A RENDER TEST ON PURPOSE: jsdom does
+ *      not load Bulma, so no mounted test can see the contrast.  What can
+ *      be checked is the rule that produces it.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, it, expect} from "vitest";
+import {readdirSync, readFileSync} from "node:fs";
+import {dirname, join} from "node:path";
+import {fileURLToPath} from "node:url";
+
+import {yui_tint, TINTABLE} from "./bulma_tint.js";
+
+const SRC = dirname(fileURLToPath(import.meta.url));
+
+/*
+ *  The ONE file allowed to write the literal: yui_tint() emits it only
+ *  next to a colour it has already checked against TINTABLE, and the
+ *  colour is interpolated, so no source scan can see it. What guards
+ *  that file is the behaviour suite at the bottom, not the scan.
+ */
+const EMITTER = "bulma_tint.js";
+
+/*  Every Bulma colour except 'light' itself. */
+const COLOURS = [
+    "is-primary", "is-link", "is-info", "is-success", "is-warning",
+    "is-danger", "is-black", "is-dark", "is-white", "is-text", "is-ghost"
+];
+
+/*
+ *  How far around an occurrence to look for its colour.  The colour does
+ *  not have to sit on the same line: it may come from a ternary, from a
+ *  string concatenation split across two lines, or from a variable
+ *  interpolated just before.  A window is what covers all three without
+ *  parsing javascript.
+ */
+const WINDOW = 260;
+
+function offenders(source)
+{
+    let out = [];
+    let at = source.indexOf("is-light");
+    while(at >= 0) {
+        const from = Math.max(0, at - WINDOW);
+        const to = Math.min(source.length, at + WINDOW);
+        const around = source.slice(from, to);
+
+        /*  A comment ABOUT the rule is not a use of it. */
+        const line_start = source.lastIndexOf("\n", at) + 1;
+        const line = source.slice(line_start, source.indexOf("\n", at));
+        const is_comment = /^\s*(\*|\/\/|\/\*)/.test(line);
+
+        if(!is_comment && !COLOURS.some((c) => around.includes(c))) {
+            out.push(line.trim());
+        }
+        at = source.indexOf("is-light", at + 1);
+    }
+    return out;
+}
+
+describe("bulma: is-light never travels alone", () => {
+    const files = readdirSync(SRC).filter(
+        (f) => f.endsWith(".js") && !f.endsWith(".test.js") && f !== EMITTER
+    );
+
+    it("scans every source file of the library", () => {
+        expect(files.length).toBeGreaterThan(0);
+    });
+
+    for(let file of files) {
+        it(`${file} carries no colourless is-light`, () => {
+            const source = readFileSync(join(SRC, file), "utf-8");
+            expect(offenders(source)).toEqual([]);
+        });
+    }
+});
+
+describe("the scan itself", () => {
+    it("catches a colourless is-light", () => {
+        const bad = 'return ["span", {class: `SOMETHING tag is-light`}, "x"];';
+        expect(offenders(bad)).toHaveLength(1);
+    });
+
+    it("accepts one that travels with a colour", () => {
+        const good = 'return ["span", {class: `SOMETHING tag is-warning is-light`}, "x"];';
+        expect(offenders(good)).toEqual([]);
+    });
+
+    it("accepts a colour that arrives split across lines", () => {
+        const good = 'const c = `tag ${x ? "is-danger" : "is-warning"}`\n'
+                   + '    + " is-light";';
+        expect(offenders(good)).toEqual([]);
+    });
+});
+
+describe("yui_tint", () => {
+    it("softens every colour that CAN be softened", () => {
+        for(let name of TINTABLE) {
+            expect(yui_tint(name)).toBe(`is-${name} is-light`);
+            expect(yui_tint(`is-${name}`)).toBe(`is-${name} is-light`);
+        }
+    });
+
+    it("refuses to soften 'light' with itself", () => {
+        expect(yui_tint("light")).toBe("");
+        expect(yui_tint("is-light")).toBe("");
+    });
+
+    it("answers nothing for nothing", () => {
+        expect(yui_tint("")).toBe("");
+        expect(yui_tint(undefined)).toBe("");
+        expect(yui_tint(null)).toBe("");
+        expect(yui_tint(7)).toBe("");
+    });
+
+    it("does not pass through what it cannot vouch for", () => {
+        /*  A class this function cannot recognise is exactly the case it
+         *  exists to stop, so it comes back empty instead of forwarded.  */
+        expect(yui_tint("is-whatever")).toBe("");
+        expect(yui_tint("has-text-danger")).toBe("");
+    });
+
+    it("never emits is-light on its own", () => {
+        for(let input of TINTABLE.concat(
+            ["light", "is-light", "", "nope", "is-nope"]
+        )) {
+            const out = yui_tint(input);
+            if(out.includes("is-light")) {
+                expect(out).toMatch(/is-(primary|link|info|success|warning|danger|black|dark|white|text|ghost) is-light/);
+            }
+        }
+    });
+});

package/src/bulma_tint.js

@@ -0,0 +1,71 @@
+/***********************************************************************
+ *          bulma_tint.js
+ *
+ *      Bulma's "soften this colour" modifier, applied so that it cannot
+ *      be applied alone.
+ *
+ *      WHY THIS IS A FUNCTION AND NOT A STRING.  'light' is one of
+ *      Bulma's colours, so `is-light` is BOTH a colour and the modifier
+ *      that softens another one.  A compound selector may match the same
+ *      class twice, so `.tag.is-light.is-light` matches an element that
+ *      carries the class ONCE -- and that rule sets the text to
+ *      var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+ *      referenced four times in bulma.css, declared zero times.  The
+ *      colour declaration is then invalid while the background still
+ *      resolves, so what is left on screen is a pill with no readable
+ *      label.
+ *
+ *      Two selectors of Bulma 1 reach that undefined variable:
+ *
+ *          .tag.is-light.is-light
+ *          .notification.is-light.is-light
+ *
+ *      It cost three unreadable chips in the schema editor -- the topic
+ *      count, the schema version, and every column flag with no colour of
+ *      its own ('writable', 'image', 'wild'...).  They read as empty
+ *      pills, which looks like a bug in the DATA and is a missing CSS
+ *      variable.
+ *
+ *      The neutral chip is a bare element with no modifier at all: it
+ *      takes --bulma-background-l and --bulma-text-l, follows the theme
+ *      and stays legible in both.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+/*
+ *  Bulma's colours, minus 'light' -- which is exactly the one that must
+ *  never be softened with itself.
+ */
+const TINTABLE = [
+    "primary", "link", "info", "success", "warning",
+    "danger", "black", "dark", "white", "text", "ghost"
+];
+
+/***************************************************************
+ *  A softened colour, or nothing.
+ *
+ *      yui_tint("warning")     -> "is-warning is-light"
+ *      yui_tint("is-warning")  -> "is-warning is-light"
+ *      yui_tint("light")       -> ""     (there is nothing to soften)
+ *      yui_tint("")            -> ""
+ *      yui_tint(undefined)     -> ""
+ *
+ *  Anything it does not recognise comes back empty rather than being
+ *  passed through: a class this function cannot vouch for is exactly the
+ *  case it exists to stop.
+ ***************************************************************/
+function yui_tint(colour)
+{
+    if(typeof colour !== "string") {
+        return "";
+    }
+    const name = colour.trim().replace(/^is-/, "");
+    if(TINTABLE.indexOf(name) < 0) {
+        return "";
+    }
+    return `is-${name} is-light`;
+}
+
+export {yui_tint, TINTABLE};

package/src/c_yui_schema_editor.js

@@ -109,6 +109,7 @@ import {
     is_object,
     empty_string,
 } from "@yuneta/gobj-js";
+import {yui_tint} from "./bulma_tint.js";
 
 import "./c_yui_schema_editor.css";
 
@@ -871,7 +872,24 @@ function render(gobj)
 function open_card(gobj, logical, title, icon, tags, event, kw)
 {
     let $tags = tags.map((tag) => {
-        return ["span", {class: `${logical}_TAG tag ${tag.style || "is-light"}`},
+        /*
+         *  `is-light` ALONE IS NOT A NEUTRAL CHIP, IT IS AN UNREADABLE ONE.
+         *
+         *  'light' is one of Bulma's colours, so `is-light` is both the
+         *  colour and the modifier -- and `.tag.is-light.is-light` matches
+         *  an element carrying the class ONCE (a compound selector may
+         *  match the same class twice). That rule sets the text to
+         *  var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+         *  used four times in its stylesheet, declared zero. The colour
+         *  declaration is then invalid, the background still resolves, and
+         *  what is left is a pill with no readable label.
+         *
+         *  A bare `.tag` is the neutral chip: it takes --bulma-background-l
+         *  and --bulma-text-l, so it follows the theme and stays legible in
+         *  both. `is-light` goes on only NEXT TO a real colour, where the
+         *  variable it needs does exist.
+         */
+        return ["span", {class: `${logical}_TAG tag ${tag.style || ""}`.trimEnd()},
             tag.i18n
                 ? [["span", {i18n: tag.i18n}, t(tag.i18n)],
                    ["span", {class: "ml-1"}, `${tag.text}`]]
@@ -989,7 +1007,7 @@ function render_topics(gobj, $body)
             ["td", {class: "SCHEMA_TOPIC_NAME"}, [
                 ["span", {class: "has-text-weight-semibold"}, `${topic.name}`],
                 topic.system_topic
-                    ? ["span", {class: "SCHEMA_TOPIC_SYSTEM tag is-light ml-2",
+                    ? ["span", {class: "SCHEMA_TOPIC_SYSTEM tag ml-2",
                                 i18n: "system"}, t("system")]
                     : ["span", {}, ""],
                 ambiguous
@@ -1222,7 +1240,13 @@ function column_row(gobj, topic, col, index, readonly, twice)
     let is_pkey = (col.name === (topic.pkey || "id"));
 
     let $flags = flags.map((flag) => {
-        return ["span", {class: `SCHEMA_COL_FLAG tag is-light ${flag_style(flag)}`}, `${flag}`];
+        /*  The colour carries the meaning, and `is-light` softens it. With
+         *  no colour there is nothing to soften: a bare tag is the neutral
+         *  one, and `is-light` on its own would erase the label -- see
+         *  open_card(). It is why 'writable', 'image', 'wild' and every
+         *  other unstyled flag rendered as an empty pill.  */
+        return ["span", {class: `SCHEMA_COL_FLAG tag ${yui_tint(flag_style(flag))}`.trimEnd()},
+            `${flag}`];
     });
 
     /*  An unset `blob` column comes back as `{}`, which is an object and

package/src/c_yui_treedb_topic_with_form.js

@@ -759,13 +759,33 @@ function build_ui(gobj)
      *  Layout Schema
      *----------------------------------------------*/
     let table_id = gobj_read_str_attr(gobj, "table_id");
+    /*
+     *  A FLEX COLUMN, and that is the whole point of this block.
+     *
+     *  It used to be a plain `height:100%` box with the toolbar and the
+     *  table stacked inside it. The toolbar took its natural height and the
+     *  table asked for `maxHeight: 100%` -- 100% of the CONTAINER, not of
+     *  what the toolbar left -- so the box overflowed by exactly the height
+     *  of the toolbar. The parent scrolls (`overflow:auto`), so the page
+     *  ended up with TWO scrolls, and what fell off the bottom was the
+     *  table's own footer: the row count and the paginator. Scrolling the
+     *  outer one to reach them pushed the toolbar out of sight instead.
+     *
+     *  As a column with the chrome at `flex:none` and the table at
+     *  `flex:1 1 auto; min-height:0`, the table is sized to the space that
+     *  is actually left, its footer stays put, and the only thing that
+     *  scrolls is the rows -- which is the one scroll a table should have.
+     */
     let $container = createElement2(
-        ['div', {class: 'C_YUI_TREEDB_TOPIC_WITH_FORM', style: 'height:100%;'}, [
-            ['div', {class: 'TREEDB_TABLE_TOOLBAR toolbar_tabulator_table m-1', style: 'display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;'}],
+        ['div', {class: 'C_YUI_TREEDB_TOPIC_WITH_FORM',
+                 style: 'height:100%; min-height:0; display:flex; flex-direction:column;'}, [
+            ['div', {class: 'TREEDB_TABLE_TOOLBAR toolbar_tabulator_table m-1',
+                     style: 'flex:none; display:flex; justify-content:space-between; ' +
+                            'align-items:center; flex-wrap:wrap;'}],
             ['div',
                 {
                     id: `${table_id}`,
-                    style: 'margin-top:0px !important;',
+                    style: 'margin-top:0px !important; flex:1 1 auto; min-height:0;',
                 }
             ]
         ]]
@@ -782,6 +802,8 @@ function build_ui(gobj)
             on_clear: () => gobj_send_event(gobj, "EV_CLEAR_SELECTION", {}, gobj)
         });
         gobj_write_attr(gobj, "selection_bar", bar);
+        /*  Chrome too: it must not take height from the rows. */
+        bar.$el.style.flex = "none";
         $container.insertBefore(bar.$el, $container.querySelector(`#${table_id}`));
     }
 

package/src/shell_modals.js

@@ -33,6 +33,7 @@ import {
     empty_string,
     log_warning,
 } from "@yuneta/gobj-js";
+import {yui_tint} from "./bulma_tint.js";
 
 import {
     activate_focus_trap_on,
@@ -121,7 +122,7 @@ function show_notification(shell, kind, message, opts)
         ? {i18n: message}
         : {};
     let $note = createElement2(
-        ["div", {class: `TOAST notification yui-notification is-${kind} is-light`,
+        ["div", {class: `TOAST notification yui-notification ${yui_tint(kind)}`,
                  role: kind === "danger" ? "alert" : "status"},
             [
                 ["button", {class: "TOAST_CLOSE delete", "aria-label": "close"}],