Color badge fade display

[Demonstrandum]

Motivation for features / changes

Previously, the color badge/selector in the runs data table was positioned as the last column. This meant that for runs with long names, users had to horizontally scroll to view or interact with the color picker, hindering usability.

Technical description of changes

This PR addresses the issue by making the color column sticky on the right side of the runs data table and adding a fade-out effect for the run name text.

Specifically, the following changes were made to tensorbored/webapp/runs/views/runs_table/runs_data_table.scss:

• Sticky Positioning: The .table-column-color cells now use position: sticky; right: 0; to ensure they remain visible on the right edge of the table, regardless of horizontal scroll.
• Opaque Background: Each color cell is given an opaque background matching the page's background color (light or dark theme) to float cleanly above the text.
• Fade Gradient: A ::before pseudo-element is added to each color cell, creating a linear-gradient from transparent to the background color over 24px to the left. This provides a smooth fade-out effect for run name text underneath the badge.
• Header Z-index: The header color cell (tb-data-table-header-cell.table-column-color) has its z-index set to 2 to correctly layer at the intersection of the sticky header and sticky column.
• Dark Mode Support: All background and gradient colors correctly adapt to dark mode using the tb-dark-theme mixin.

Screenshots of UI changes (or N/A)

N/A - Please verify visually.

Detailed steps to verify changes work correctly (as executed by you)

1. Navigate to the runs table in TensorBoard.
2. Ensure you have runs with sufficiently long names that would normally cause horizontal scrolling to see the color badge.
3. Observe that the color badge/selector column remains fixed on the right side of the table as you scroll horizontally.
4. Verify that the run name text gracefully fades out as it approaches the color badge, without clashing or overlapping awkwardly.
5. Toggle between light and dark themes to ensure the background and gradient colors adapt correctly.

Alternate designs / implementations considered (or N/A)

N/A

---

 

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[github-actions]

Preview Deployment

Status	✅ Running
Live Preview	https://Demonstrandum-tensorbored-pr-46.hf.space
Space	https://huggingface.co/spaces/Demonstrandum/tensorbored-pr-46

Details

• Wheel: tensorbored_nightly-2.21.0a20260216-py3-none-any.whl
• Commit: 5565f79
• Build status: success