fix: slider thumb and mark styling not applying theme tokens

[elizabetdev]

Summary

• Thumb styling: Moved from classNames to inline styles to fix CSS specificity issue where Mantine's default :where() selectors override CSS module classes due to load order. Inline styles always win.
• Mark styling: Added !important to mark CSS module overrides (size, border-color, background-color) so theme tokens apply reliably over Mantine defaults.
• Vertical centering: Added margin-top: 1px to center 6px mark dots within the 8px track height.
• Removed broken transform: Removed the translateX(1px) translateY(1px) nudge that was misaligning marks and labels.
• Token fix: Corrected --color-slider-dot-active values in ClickStack dark/light modes.

Follows up on #1988.

Before

After

Test plan

• Verify slider thumb uses theme token colors (not Mantine white/default) in both ClickStack and HyperDX themes
• Verify slider mark dots are solid 6px circles with correct token colors
• Verify mark dots are vertically centered on the track
• Verify mark labels ("0", "10") are horizontally aligned with track endpoints
• Verify no visual regressions in both dark and light modes for both themes

[changeset-bot]

🦋 Changeset detected

Latest commit: 8e1f3e8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Mar 30, 2026 10:48am

[github-actions]

PR Review

• ⚠️ Multiple !important flags in .sliderMark — acceptable as a workaround for Mantine's :where() specificity issue, but consider adding a comment explaining why they're needed so future maintainers don't remove them thinking they're unnecessary.
• ⚠️ margin-top: 1px is hardcoded and implicitly depends on the 6px mark / 8px track size relationship — if either dimension changes, this will silently break centering. A comment tying it to those values would help.

✅ No critical bugs or security issues. The approach (inline styles for thumb, !important for marks) is a reasonable fix for CSS specificity conflicts with third-party library defaults. Token corrections look correct.

[github-actions]

Knip - Unused Code Analysis

⚪ No changes detected (0 issues on both main and PR)

What is this?

Knip finds unused files, dependencies, and exports in your codebase.
This comment compares the PR branch against main to detect regressions.

Run yarn knip locally to see full details.

[github-actions]

E2E Test Results

✅ All tests passed • 102 passed • 3 skipped • 1021s

Status	Count
✅ Passed	102
❌ Failed	0
⚠️ Flaky	2
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →