🤖 fix: threshold slider no longer blocks token meter tooltip #888
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ammar-agent
force-pushed
the
fix-context-usage-display-bug
branch
from
0823fae to
73573c1
Compare
ammar-agent
changed the title
ammar-agent
force-pushed
the
fix-context-usage-display-bug
branch
from
73573c1 to
ca4c4bf
Compare
ammar-agent
changed the title
The threshold slider was covering the entire bar container, intercepting all mouse events and preventing the token meter tooltip from showing. Fix: Use pointer-events: none on the container and only capture events in a small drag zone around the indicator. This allows the tooltip to show when hovering elsewhere on the bar. --- _Generated with `mux`_
ammar-agent
changed the title
ammar-agent
force-pushed
the
fix-context-usage-display-bug
branch
from
cb7b2eb to
07deaa9
Compare
ethanndickson
added a commit
that referenced
this pull request
Dec 17, 2025
Replace hardcoded hex colors in React components with CSS variables from globals.css for consistency and maintainability. Changes: - Add 10 new CSS variables to globals.css @theme block - Update 9 component files to use CSS variables - Fix AGENTS.md styling directive to reference correct file path Components updated: - FileEditToolCall.tsx: #888 → var(--color-muted) - TerminalView.tsx: terminal colors via getComputedStyle() for xterm.js - FileTree.tsx: #666 → var(--color-dim) - ThresholdSlider.tsx: #2d2d30/#cccccc → var(--color-modal-bg/bright) - TodoList.tsx: status colors → semantic variables - InitMessage.tsx: all hardcoded colors → Tailwind classes - Mermaid.tsx: #e06c75 → var(--color-syntax-error) - AIView.tsx: #888/#2d2d30/#d7ba7d → semantic variables All color mappings verified to be exact or within ±2 units (imperceptible).
github-merge-queue bot
pushed a commit
that referenced
this pull request
Dec 17, 2025
Replace hardcoded hex colors in React components with CSS variables from `globals.css` for consistency and maintainability. ## Changes ### New CSS Variables (globals.css) - `--color-code-string`: `hsl(40 53% 67%)` - string literals (#d7ba7d) - `--color-syntax-error`: `hsl(355 65% 65%)` - One Dark error red (#e06c75) - `--color-terminal-bg/fg`: terminal colors for xterm.js - `--color-info`: `hsl(207 90% 54%)` - info blue (#2196f3) - `--color-init-bg/border`: init message styling - `--color-init-error-bg/border`: error state styling - `--color-text-lighter`: `hsl(0 0% 87%)` - lighter text (#ddd) ### Components Updated (9 files) | File | Before | After | |------|--------|-------| | FileEditToolCall.tsx | `#888` | `var(--color-muted)` | | TerminalView.tsx | `#1e1e1e`, `#d4d4d4` | getComputedStyle() for xterm.js canvas | | FileTree.tsx | `#666` | `var(--color-dim)` | | ThresholdSlider.tsx | `#2d2d30`, `#cccccc` | `var(--color-modal-bg)`, `var(--color-bright)` | | TodoList.tsx | `#4caf50`, `#2196f3`, `#888`, `#666` | semantic variables | | InitMessage.tsx | Tailwind arbitrary values | Tailwind theme classes | | Mermaid.tsx | `#e06c75` | `var(--color-syntax-error)` | | AIView.tsx | `#888`, `#2d2d30`, `#d7ba7d` | semantic variables | ### AGENTS.md Fix Corrected styling directive from non-existent `src/styles/colors.tsx` to actual location `src/browser/styles/globals.css`. ## Verification All color mappings verified to produce identical or imperceptibly different colors (±1-2 RGB units max for new variables). --- _Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high`_
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The threshold slider was covering the entire bar container, intercepting all mouse events and preventing the token meter tooltip from showing.
Fix: Use
pointer-events: noneon the container and add a separate drag handle div withpointer-events: autothat only covers a 32px zone around the threshold indicator.Generated with
mux