Mind map leaf comment popover needs styling fix

AhmedHanafy725 commented

2026-05-06 07:42:27 +00:00

Member

When adding a comment to a mind map leaf node, the comment popover shows broken/inconsistent styling. The popover appears with default dark styling that does not match the rest of the comment UI in the whiteboard.

Expected

The comment popover on mind map leaves should match the standard comment popover look used elsewhere on the canvas.

Actual

The popover renders with mismatched dark styling.

Repro

Open a board
Create a mind map
Right-click a leaf node and add a comment
Observe the popover styling

Screenshot

When adding a comment to a mind map leaf node, the comment popover shows broken/inconsistent styling. The popover appears with default dark styling that does not match the rest of the comment UI in the whiteboard. ## Expected The comment popover on mind map leaves should match the standard comment popover look used elsewhere on the canvas. ## Actual The popover renders with mismatched dark styling. ## Repro 1. Open a board 2. Create a mind map 3. Right-click a leaf node and add a comment 4. Observe the popover styling ## Screenshot ![screenshot](https://forge.ourworld.tf/attachments/c71f20ff-6359-421b-8e8a-fdf6a4bc0ee9)

1.png

10 KiB

AhmedHanafy725 commented

2026-05-06 07:45:21 +00:00

Author

Member

Implementation Spec

Root cause

There are two parallel comment-popover implementations in the whiteboard, and the mind-map one does not match the canvas one:

Standard comment popover (sticky notes, shapes, frames, comment markers): crates/hero_whiteboard_ui/static/web/js/whiteboard/comments.js builds the popover from CSS classes (.comment-popover, .comment-popover-header, .comment-popover-title, .comment-body, .comment-new-textarea, .comment-btn) defined in crates/hero_whiteboard_ui/static/web/css/whiteboard.css. These pick up the active theme via --wb-toolbar-bg, --wb-border, --wb-text, --wb-primary, etc.
Mind-map node comment popover: crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js showCommentPopup builds its own DOM with hardcoded inline style.cssText that pulls from a different theme namespace (mindmap-comment-bg, mindmap-comment-border, mindmap-comment-text, mindmap-comment-accent). In the default dark theme these resolve to #1a1d21, #495057, #e0e0e0 — the dark broken look in the screenshot. Save/Remove buttons use hardcoded #007AFF/#495057 instead of .comment-btn styles.

Fix: rebuild the mind-map popup using the same .comment-popover CSS classes the rest of the canvas uses.

Files to Modify

crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js — rewrite showCommentPopup to use shared CSS classes, removing inline style.cssText strings that read mindmap-comment-* tokens. Preserve all behavior (Save/Remove/close, click-outside, Esc, positioning, WhiteboardSync.onUpdate calls).
crates/hero_whiteboard_ui/static/web/css/whiteboard.css — add a .comment-hint class for the "Supports markdown" hint.

Implementation Plan

Files: mindmap.js, whiteboard.css

Wrapper: set class to comment-popover; drop inline background/border/padding/box-shadow/max-width. Keep only positional inline styles (position, left, top, z-index).
Header: replace with <div class="comment-popover-header"><span class="comment-popover-title">Comment</span><button class="comment-close-btn" id="mm-comment-close">×</button></div>.
Body: wrap textarea + hint + buttons in <div class="comment-body" style="padding:8px 12px;">.
Textarea: class="comment-new-textarea", drop inline styles. Keep placeholder + pre-filled value.
Hint: class="comment-hint" (new CSS rule).
Buttons: <button class="comment-btn delete">Remove</button> and <button class="comment-btn submit">Save</button>.
Keep positioning math (stageBox, transform.point), the wrapper id mm-comment-popup, the close-button id mm-comment-close, and all event handlers unchanged so closeCommentPopup / _commentOutsideHandler keep working.

Add to whiteboard.css (next to existing .comment-popover rules):

.comment-hint { font-size: 10px; color: var(--wb-text-muted); margin: 6px 12px 0; }

Dependencies: none

Acceptance Criteria

Right-click any mind-map node (root, branch, leaf) → "Add Comment" opens a popover whose background, border, textarea, and buttons visually match the popover used for sticky-note / shape / frame / comment-marker comments.
Clicking the 💬 indicator on a node with a comment opens the same themed popover.
Switching whiteboard themes re-themes the mind-map comment popover the same way it re-themes other comment popovers.
Save persists nodeData.comment, re-renders the mind map, broadcasts the update.
Remove clears nodeData.comment, removes the 💬 indicator on next render, broadcasts the update.
Esc, click-outside, and the × button all close the popover.
The "Supports markdown" hint remains visible, styled as muted small text.

Notes

The mindmap-comment-bg token is also used for the node text edit input (separate from the comment popup). Leave those theme tokens in place for this issue — only the comment popup changes.

## Implementation Spec ### Root cause There are two parallel comment-popover implementations in the whiteboard, and the mind-map one does not match the canvas one: 1. **Standard comment popover (sticky notes, shapes, frames, comment markers):** `crates/hero_whiteboard_ui/static/web/js/whiteboard/comments.js` builds the popover from CSS classes (`.comment-popover`, `.comment-popover-header`, `.comment-popover-title`, `.comment-body`, `.comment-new-textarea`, `.comment-btn`) defined in `crates/hero_whiteboard_ui/static/web/css/whiteboard.css`. These pick up the active theme via `--wb-toolbar-bg`, `--wb-border`, `--wb-text`, `--wb-primary`, etc. 2. **Mind-map node comment popover:** `crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js` `showCommentPopup` builds its own DOM with hardcoded inline `style.cssText` that pulls from a different theme namespace (`mindmap-comment-bg`, `mindmap-comment-border`, `mindmap-comment-text`, `mindmap-comment-accent`). In the default dark theme these resolve to `#1a1d21`, `#495057`, `#e0e0e0` — the dark broken look in the screenshot. Save/Remove buttons use hardcoded `#007AFF`/`#495057` instead of `.comment-btn` styles. Fix: rebuild the mind-map popup using the same `.comment-popover` CSS classes the rest of the canvas uses. ### Files to Modify - `crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js` — rewrite `showCommentPopup` to use shared CSS classes, removing inline `style.cssText` strings that read `mindmap-comment-*` tokens. Preserve all behavior (Save/Remove/close, click-outside, Esc, positioning, `WhiteboardSync.onUpdate` calls). - `crates/hero_whiteboard_ui/static/web/css/whiteboard.css` — add a `.comment-hint` class for the "Supports markdown" hint. ### Implementation Plan #### Step 1: Re-theme mind-map comment popup Files: `mindmap.js`, `whiteboard.css` 1. Wrapper: set class to `comment-popover`; drop inline background/border/padding/box-shadow/max-width. Keep only positional inline styles (`position`, `left`, `top`, `z-index`). 2. Header: replace with `<div class="comment-popover-header"><span class="comment-popover-title">Comment</span><button class="comment-close-btn" id="mm-comment-close">×</button></div>`. 3. Body: wrap textarea + hint + buttons in `<div class="comment-body" style="padding:8px 12px;">`. 4. Textarea: `class="comment-new-textarea"`, drop inline styles. Keep placeholder + pre-filled value. 5. Hint: `class="comment-hint"` (new CSS rule). 6. Buttons: `<button class="comment-btn delete">Remove</button>` and `<button class="comment-btn submit">Save</button>`. 7. Keep positioning math (`stageBox`, `transform.point`), the wrapper id `mm-comment-popup`, the close-button id `mm-comment-close`, and all event handlers unchanged so `closeCommentPopup` / `_commentOutsideHandler` keep working. Add to `whiteboard.css` (next to existing `.comment-popover` rules): ```css .comment-hint { font-size: 10px; color: var(--wb-text-muted); margin: 6px 12px 0; } ``` Dependencies: none ### Acceptance Criteria - [ ] Right-click any mind-map node (root, branch, leaf) → "Add Comment" opens a popover whose background, border, textarea, and buttons visually match the popover used for sticky-note / shape / frame / comment-marker comments. - [ ] Clicking the 💬 indicator on a node with a comment opens the same themed popover. - [ ] Switching whiteboard themes re-themes the mind-map comment popover the same way it re-themes other comment popovers. - [ ] Save persists `nodeData.comment`, re-renders the mind map, broadcasts the update. - [ ] Remove clears `nodeData.comment`, removes the 💬 indicator on next render, broadcasts the update. - [ ] Esc, click-outside, and the × button all close the popover. - [ ] The "Supports markdown" hint remains visible, styled as muted small text. ### Notes The `mindmap-comment-bg` token is also used for the node text edit input (separate from the comment popup). Leave those theme tokens in place for this issue — only the comment popup changes.

AhmedHanafy725 commented

2026-05-06 07:48:08 +00:00

Author

Member

Validation

Check	Result
Files changed	2 file(s), JS/CSS only
`cargo check --workspace`	pass
`cargo test --workspace --lib`	0 passed, 0 failed

## Validation | Check | Result | |---|---| | Files changed | 2 file(s), JS/CSS only | | `cargo check --workspace` | pass | | `cargo test --workspace --lib` | 0 passed, 0 failed |

AhmedHanafy725 commented

2026-05-06 07:48:36 +00:00

Author

Member

Implementation summary

Changes

crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js — rewrote showCommentPopup to build the popup from the shared .comment-popover / .comment-popover-header / .comment-popover-title / .comment-close-btn / .comment-body / .comment-new-textarea / .comment-hint / .comment-btn submit / .comment-btn delete classes used by the rest of the canvas. Removed the hardcoded inline style.cssText strings and the reads of mindmap-comment-bg / mindmap-comment-border / mindmap-comment-text / mindmap-comment-accent / mindmap-placeholder-text theme tokens for the popup chrome. Removed hardcoded button colors #007AFF / #495057. Preserved positioning math, the mm-comment-popup / mm-comment-close ids, the click-outside handler, and the Save / Remove behavior (renderMindmap(group) + WhiteboardSync.onUpdate(group)).
crates/hero_whiteboard_ui/static/web/css/whiteboard.css — added one rule:
```
.comment-hint { font-size: 10px; color: var(--wb-text-muted); margin: 6px 12px 0; }
```
for the "Supports markdown. Links: text" hint.

The mindmap-comment-* theme tokens were left intact in themes.js because they are still used by the mind-map node-edit input (a separate widget from the comment popup).

Validation

cargo check --workspace: pass
cargo test --workspace --lib: pass (matches CI)
Diff scope: 2 files, JS/CSS only, no Rust touched

Notes

This is a UI-only change — the visual outcome should be confirmed in the browser by opening a board, creating a mind map, right-clicking a node, and choosing Add Comment. The popover should now match the look of comment popovers on sticky notes / shapes / frames / standalone canvas comment markers, and should re-theme correctly when the whiteboard theme changes.

## Implementation summary ### Changes - `crates/hero_whiteboard_ui/static/web/js/whiteboard/mindmap.js` — rewrote `showCommentPopup` to build the popup from the shared `.comment-popover` / `.comment-popover-header` / `.comment-popover-title` / `.comment-close-btn` / `.comment-body` / `.comment-new-textarea` / `.comment-hint` / `.comment-btn submit` / `.comment-btn delete` classes used by the rest of the canvas. Removed the hardcoded inline `style.cssText` strings and the reads of `mindmap-comment-bg` / `mindmap-comment-border` / `mindmap-comment-text` / `mindmap-comment-accent` / `mindmap-placeholder-text` theme tokens for the popup chrome. Removed hardcoded button colors `#007AFF` / `#495057`. Preserved positioning math, the `mm-comment-popup` / `mm-comment-close` ids, the click-outside handler, and the Save / Remove behavior (`renderMindmap(group)` + `WhiteboardSync.onUpdate(group)`). - `crates/hero_whiteboard_ui/static/web/css/whiteboard.css` — added one rule: ```css .comment-hint { font-size: 10px; color: var(--wb-text-muted); margin: 6px 12px 0; } ``` for the "Supports markdown. Links: [text](url)" hint. The `mindmap-comment-*` theme tokens were left intact in `themes.js` because they are still used by the mind-map node-edit input (a separate widget from the comment popup). ### Validation - `cargo check --workspace`: pass - `cargo test --workspace --lib`: pass (matches CI) - Diff scope: 2 files, JS/CSS only, no Rust touched ### Notes This is a UI-only change — the visual outcome should be confirmed in the browser by opening a board, creating a mind map, right-clicking a node, and choosing Add Comment. The popover should now match the look of comment popovers on sticky notes / shapes / frames / standalone canvas comment markers, and should re-theme correctly when the whiteboard theme changes.