Fix collapsed ResourceBar track and unstyled Hub brand tokens in OSS - #1919
Merged
Merged
Conversation
ResourceBar: inside Tooltip's inline-flex wrapper the bar row sized to
its content, so the track collapsed — to ~2px in the inline layout
(Capacity's Actual Usage rows) and to the label width in the stacked
layout (pod CPU/memory cells in ResourcesView). The row now fills the
wrapper when a tooltip is set; the no-tooltip path is unchanged.
Brand tokens: --color-radar-accent and --color-brand-{50,500,950} are
Radar Hub's @theme tokens and undefined in Radar OSS, leaving links,
focus rings, selected states and FilterPill's brand tone unstyled.
Each use now falls back to OSS's --accent / --accent-muted; Hub's own
definitions still take precedence.
PR Summary by QodoFix tooltip-wrapped ResourceBar width and OSS brand styling
AI Description
Diagram
High-Level Assessment
Files changed (7)
|
Code Review by Qodo
1. Three brand fills skip theme utilities
|
![qodo-free-for-open-source-projects[bot]](https://avatars.githubusercontent.com/in/1068000?s=60&v=4){kind=small}
Live check on the Capacity pool Nodes table showed the first fix's side effect: Tooltip's wrapper is inline-level, so once each bar filled its width the CPU and MEM rows of a nowrap cell sat on one line and the second spilled into the next column. A block div around the tooltip branch keeps sibling bars stacked. In that auto-layout table the track also has no preferred width, so the inline layout gets a 64px floor.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Two display bugs found during the Claude Design sync (#1918), both verified in a real browser before and after.
ResourceBar track collapses when it has a tooltip
Tooltip's wrapper isinline-flex, so the bar row inside it sized to its content and theflex-1track got no room.Measured in Chromium, 300px container:
Fix: the bar row gets
w-fullwhen a tooltip is set, and the tooltip branch is wrapped in a blockdiv. The wrapper is inline-level, so without it two bars in one nowrap cell (Capacity's CPU + MEM) share a line and the second spills into the next column. The inline layout's track also gets a 64px floor (min-w-16); its only use is that auto-layout table cell, where the track otherwise has no preferred width. The no-tooltip path is unchanged apart from that floor.Live check (build from this branch):
skh-nonprod, Capacity → poolgeneral→ Nodes & claims: CPU/MEM usage bars stacked, 98px tracks at 1920px (64px floor at 1280px), inside the cell. The table no longer overflows horizontally at 1920px (it did on main).nonprod-cluster-us-east1, Pods list: CPU/memory tracks fill the cell (128px of 160px, the full content box), uniform across rows.Hub brand tokens undefined in OSS
--color-radar-accentand--color-brand-{50,500,950}are defined only in Radar Hub's@theme(its emerald sub-brand). In OSS they resolve to nothing, so these 16 sites render unstyled: ChecksView links, focus rings, selected states; IssuesView; AuditFindingsTable links; FilterPillbrandtone; HomeView; Omnibar focus.Fix: each use falls back to OSS's own accent (
var(--color-radar-accent,var(--accent)), tints to--accent-muted). Defining the tokens in k8s-ui's theme instead could override Hub's values depending on stylesheet order; call-site fallbacks can't.Computed colors in Chromium:
rgb(74,124,201)(Radar blue)rgb(106,159,224)rgb(16,185,129)(emerald, unchanged)#ecfdf5(unchanged)Every changed class was confirmed to still compile to the intended CSS property with Tailwind v4.
Live on GKE (dark and light): 239 Checks links and 12 expanded Issues links compute to
rgb(106,159,224)/rgb(74,124,201), and the check-row focus ring is the accent at 40%.Checks
make tsccleanNote
Low Risk
Visual and layout-only changes with CSS variable fallbacks; no security, data, or API behavior changes.
Overview
Fixes two OSS display regressions from the design sync: ResourceBar tracks that collapse when a tooltip is present, and brand accent styling that disappears where Hub-only CSS variables are undefined.
ResourceBar: When
tooltipis set, the bar row now usesw-fullso the flex track can grow, inline tracks get amin-w-16floor, and the tooltip is wrapped in a block container so stacked CPU/MEM bars in tight table cells stay on separate lines instead of sharing one inline-flex row.Accent tokens: Call sites that referenced
--color-radar-accentand--color-brand-*now use CSS fallbacks to OSS--accent/--accent-muted(Checks, Issues, Audit findings links, FilterPill brand tone, Home “View all”, Omnibar hero focus). Hub keeps its emerald values when those tokens are defined.Reviewed by Cursor Bugbot for commit 60f4592. Bugbot is set up for automated code reviews on this repo. Configure here.