[learning] mendix-agent-ui: stock ConversationalUI popup (layout-chat-popup) — title, width and invisible header text

What happened, and what generalizes from it:

skills/mendix-agent-ui.md covers the custom .copilot panel only. Many apps instead use the stock ConversationalUI popup (page using the layout-chat-popup layout). Customising that variant hits three non-obvious points that the skill currently gives no guidance on:

The popup header text is the page Title. The <h4> in .mx-window-header renders the Title of the popup page (e.g. <Module>.ConversationalUI_PopUp). Change the header text there, not in the layout or snippet.
The header title is invisible by default. In themesource/conversationalui/web/components/_popup-chat.scss the header sets background: var(--chat-header-color) and h4 { color: var(--chat-header-color); } — same colour on same colour. Fix in theme/web/main.scss with a token, not a literal:
```
.layout-chat-popup .mx-window-header h4 {
    color: var(--header-text-color);
}
```
(Field fix seen in the wild was color: #ffffff !important; — works, but violates the toolkit's tokens-only rule. The scoped selector above wins on specificity without !important, since main.scss compiles last.)
Width is a !default SCSS variable, and it is shared. _chat-variables.scss declares $pop-up-chat-width: 500px !default; (also $pop-up-chat-height, bottom/right offsets) and pulls in theme/web/custom-variables.scss via @use. So override it as a declaration in custom-variables.scss:
```
$pop-up-chat-width: 40vw;
```
Caveat: the same variable drives the sidebar chat width (_sidebar-chat.scss), so widening the popup widens the sidebar too.
- Newer module versions bridge the variables to CSS custom properties (_css-variables.scss → :root { --pop-up-chat-width: …; --chat-header-color: …; }) and the components read var(--pop-up-chat-width). On those versions a :root { --pop-up-chat-width: 40vw; } override in main.scss is an alternative. Older versions use the SCSS variable directly, so the custom-variables.scss route is the one that works on both.

After editing either file, the theme must recompile (F5 / re-run in Studio Pro) before the change shows.

General principle (already in learned-stylegallery.md: custom-variables.scss = declarations only; main.scss compiles last and overrides Atlas) — this is just the popup-specific application of it, plus the two traps (title source, invisible h4).

Field evidence

Mendix 11.x app with the ConversationalUI popup; header title invisible until the h4 colour override was added; width override only took effect from custom-variables.scss, not from a rule in main.scss.
Verified against the ConversationalUI theme source in two module generations (with and without the CSS-variable bridge).

Where this probably lands

New short section "Stock popup variant (layout-chat-popup)" in skills/mendix-agent-ui.md, after the custom-panel material: the three points above, cross-referencing learned-stylegallery.md for the variables-vs-rules rule rather than repeating it.
Optionally a one-line pointer in the routing table so "ConversationalUI popup styling" queries land on mendix-agent-ui.

Triage: FIX track. docs-skill. The toolkit side is verified (skills/mendix-agent-ui.md covers only the custom .copilot panel). The ConversationalUI theme behaviour (same-colour h4, the $pop-up-chat-width: 500px !default shared with the sidebar chat, the CSS-variable bridge in newer module versions) rests on the reporter's field run and source reading and is UNVERIFIED here.
Root cause: Missing guidance. skills/mendix-agent-ui.md (1,452 words; sections 1–5, "Where the panel goes", "Checklist") never mentions layout-chat-popup, pop-up-chat-width or chat-header-color. A repo-wide grep of skills/ finds no other entry, so this is not a duplicate.
Value: Med. Every app that uses the stock ConversationalUI popup rather than a custom panel. The invisible header title and the width that "doesn't take" from main.scss each cost a debugging round, and the field fix (#ffffff !important) breaks the tokens-only rule.
Risk of fixing: None for gates, exit codes or parsed output. mendix-agent-ui.md is on demand (skill-routing.tsv: tier ondemand, role mdl), so 0 always-loaded words. Changing the routing trigger is optional; if done, it means a re-render plus render-routing.sh --check.
Rigidity check: No process path, architecture or performance change.
Proposed fix: Add a short section after "Where the panel goes": "Stock popup variant (layout-chat-popup)", with the three points:

The header text is the popup page's Title.
The h4 is invisible by default. Fix it with a token-based scoped rule in main.scss, .layout-chat-popup .mx-window-header h4 { color: var(--header-text-color); }, never a literal or !important.
Set the width as a declaration in custom-variables.scss, and note that it also widens the sidebar chat. The :root custom property is an alternative only on module versions that have the CSS-variable bridge.

Cross-reference learned-stylegallery.md for the variables-vs-rules rule instead of restating it. Add one checklist line: "popup variant: header colour and width overridden via tokens". Optionally, extend the routing trigger with "or styling the stock ConversationalUI popup (layout-chat-popup)". Add a CHANGELOG line crediting the reporter.
Proof: Inspection only. The section exists and names all three traps; render-routing.sh --check stays in sync, with the baseline unchanged; and check-no-private-citations.sh / the leak guard stay clean (no app names).
Effort: S. Recommendation: NEXT. Small, on-demand, real field evidence, low risk.

Reply go to have a fix PR opened (it still gets an independent review and your merge).

Generated by Claude Code

GoVerstuurd vanaf mijn iPhoneOp 24 okt 2026 om 01:34 heeft MendixMau ***@***.***> het volgende geschreven:MendixMau left a comment (MendixMau/mxcli-project-toolkit#574) Triage: FIX track. docs-skill. The toolkit side is verified (skills/mendix-agent-ui.md covers only the custom .copilot panel). The ConversationalUI theme behaviour (same-colour h4, the $pop-up-chat-width: 500px !default shared with the sidebar chat, the CSS-variable bridge in newer module versions) rests on the reporter's field run and source reading and is UNVERIFIED here. Root cause: Missing guidance. skills/mendix-agent-ui.md (1,452 words; sections 1–5, "Where the panel goes", "Checklist") never mentions layout-chat-popup, pop-up-chat-width or chat-header-color. A repo-wide grep of skills/ finds no other entry, so this is not a duplicate. Value: Med. Every app that uses the stock ConversationalUI popup rather than a custom panel. The invisible header title and the width that "doesn't take" from main.scss each cost a debugging round, and the field fix (#ffffff !important) breaks the tokens-only rule. Risk of fixing: None for gates, exit codes or parsed output. mendix-agent-ui.md is on demand (skill-routing.tsv: tier ondemand, role mdl), so 0 always-loaded words. Changing the routing trigger is optional; if done, it means a re-render plus render-routing.sh --check. Rigidity check: No process path, architecture or performance change. Proposed fix: Add a short section after "Where the panel goes": "Stock popup variant (layout-chat-popup)", with the three points: The header text is the popup page's Title. The h4 is invisible by default. Fix it with a token-based scoped rule in main.scss, .layout-chat-popup .mx-window-header h4 { color: var(--header-text-color); }, never a literal or !important. Set the width as a declaration in custom-variables.scss, and note that it also widens the sidebar chat. The :root custom property is an alternative only on module versions that have the CSS-variable bridge. Cross-reference learned-stylegallery.md for the variables-vs-rules rule instead of restating it. Add one checklist line: "popup variant: header colour and width overridden via tokens". Optionally, extend the routing trigger with "or styling the stock ConversationalUI popup (layout-chat-popup)". Add a CHANGELOG line crediting the reporter. Proof: Inspection only. The section exists and names all three traps; render-routing.sh --check stays in sync, with the baseline unchanged; and check-no-private-citations.sh / the leak guard stay clean (no app names). Effort: S. Recommendation: NEXT. Small, on-demand, real field evidence, low risk. Reply go to have a fix PR opened (it still gets an independent review and your merge). Generated by Claude Code —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

Bug sweep 2026-10-26: gates, runners, doctor, lint receipt, git hooks…

Promoted in #578 (squash a088b4e) into mendix-agent-ui.md § Stock popup variant (title, invisible h4, shared width variable), plus a checklist line.

Generated by Claude Code

Navigation Menu

Repository navigation

[learning] mendix-agent-ui: stock ConversationalUI popup (layout-chat-popup) — title, width and invisible header text #574

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

[learning] mendix-agent-ui: stock ConversationalUI popup (layout-chat-popup) — title, width and invisible header text #574

Description

Activity

MendixMau commented on Oct 23, 2026

joshuamoesa commented on Oct 24, 2026

MendixMau commented on Oct 26, 2026

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions