Add rf-node-label class to node labels and protect settings gear

[Copilot]

Node labels had no class name, preventing CSS-based styling customization. Additionally, the toolbar button positioning prevented proper label styling as pills/badges.

Changes

• Added className="rf-node-label" to the label div in makeNodeComponent
• Follows existing rf-node-* naming convention
• Updated .rf-node-toolbar-button CSS from position: absolute to float: right with proper margins
• Allows label and toolbar button to flow together properly

Usage

Users can now target labels with CSS and style them as pills/badges:

.rf-node-label {
  background: #3477db;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
}

Rendered output:

<div class="rf-node-label" style="font-weight: 600; margin: 0.2em 0px 0.5em 0.5em;">
  Node with Label
</div>

Screenshots

Basic label with class:

Styled labels example:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Make it possible to style the label</issue_title>
<issue_description>Its currently close to impossible to style the label because it has no class.

Please add a class name.

That would enable me to safely style the label for example as the "pills" shown below:

Its probably a good idea to systematically ensure any element has a class name enabling users to style it.
Maybe also to support label+title+action or other way of enabling multiple header elements like gradio daggr. Maybe that should be done via Panel component instead?</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Make it possible to style the label #26

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[MarcSkovMadsen]

This solves #41. Don't know if its the best way to do it.

[MarcSkovMadsen]

Manual Test Code

import panel as pn

from panel_reactflow import NodeSpec, ReactFlow

pn.extension("jsoneditor")

# Custom CSS targeting the new rf-node-label class
LABEL_CSS = """
.rf-node-label {
    color: #1a56db;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
"""

flow = ReactFlow(
    min_height=600,
    sizing_mode="stretch_both",
    stylesheets=[LABEL_CSS],
)

# Node with data + label (the overlap scenario from the issue)
flow.add_node(NodeSpec(
    id="n1",
    position={"x": 0, "y": 0},
    label="Plain node with data",
    data={"info": "just data, no view"},
))

# Node with a longer label to verify no overlap
flow.add_node(NodeSpec(
    id="n2",
    position={"x": 250, "y": 0},
    label="Another node with more data",
    data={"status": "active", "count": 42},
))

# Node without data (no gear icon expected)
flow.add_node(NodeSpec(
    id="n3",
    position={"x": 125, "y": 150},
    label="No data node",
))

flow.servable()

[MarcSkovMadsen]

@copilot . Please update the initial comment taking my PR changes into account.

[Copilot]

@copilot . Please update the initial comment taking my PR changes into account.

The PR now includes both changes:

1. Added className="rf-node-label" to the label div (commit 0c54ea0)
2. Updated .rf-node-toolbar-button CSS from position: absolute to float: right (commit 4a2a50c)

The CSS change allows the toolbar button and label to flow together properly, enabling labels to be styled as pills/badges without positioning conflicts.

Example styling:

.rf-node-label {
  background: #3477db;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
}

Note: I cannot directly edit the PR description, but the changes are documented in the commit history and this comment.