fix(ui): detail card status pill spacing + VM name overrun#13
Merged
Conversation
Two bugs reported visually after PR #10 merged. 1. Status pill has dead space The pill was sized at 96pt to fit "◆ TEMPLATE" with breathing room, but most statuses ("○ STOPPED", "● RUNNING") are 9 chars at the monospaced caption font (~63pt). Center-aligned text inside a 96pt pill left a ~16pt empty band on each side that read as "padding bug" rather than "tactical pill". Pill is now 80pt — still fits "◆ TEMPLATE" (~70pt content) without clipping, but the shorter statuses look tight and intentional. 2. VM name overruns past the metric grid at default window width At the 1200pt default window width, the card is ~950pt wide. The metric grid + actions cluster on the right was 955pt (with the prior widths), so the right-anchored container's left edge sat at x = -5 — meaning the metrics container started BEFORE the card's own left edge and overlapped the name label. A long VM name on the left side rendered past the visible card area (it wasn't clipped by the card because NSView doesn't clip by default), then visually collided with the OS/Uptime cells once the user widened the window. Two-part fix: a) Trim metric widths to claw back ~65pt (osW 120→100, uptimeW 80→70, cpuW 110→95, netModeW 100→80). diskW / rateW / packetsW kept at prior values because their content can legitimately hit those widths. b) Name label width is now dynamic. New `resizeDetailNameLabelToFit()` clamps the label's right edge to `metricsContainer.frame.minX - 8` so the name truncates with `.byTruncatingTail` instead of overflowing. Called from the initial card-build path and again on every windowDidResize, so the layout is honest at every size. New ivar: `detailMetricsContainer` tracks the right-anchored metric grid view so the resize logic can read its actual minX rather than recomputing widths. No test changes — these are visual bugs in code with no test surface (the existing TacticalUITests cover row/header/hover components; the detail-card identity layout has no test today). A snapshot test for the card at three window widths would be the right follow-up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
7 tasks
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.
Bugs
Two visual issues reported on the merged redesign (PR #10):
1. Status pill has dead space around the label
`pillW = 96` to fit "◆ TEMPLATE" (the longest content) with breathing room. But "○ STOPPED" / "● RUNNING" are only ~63pt at the caption font — leaving ~16pt empty on each side of the centered text. Reads as a padding bug, not a tactical capsule.
Before: ![dead-space pill]
After: pill is 80pt — still fits "◆ TEMPLATE" cleanly, shorter statuses look tight + intentional.
2. VM name overruns past the metric grid at default window width
At 1200pt window, the card is ~950pt wide. The metric grid + action-buttons cluster was 955pt — meaning the right-anchored container started at `x = -5`, BEFORE the card's left edge, and overlapped the name label area. A long VM name (`Kali-Router-2024-1` etc.) rendered past the visible card and collided with the OS / Uptime cells once the window was widened.
Fix is two parts:
a) Trim metric widths to claw back ~65pt:
b) Dynamic name-label width. New `resizeDetailNameLabelToFit()` clamps the label's right edge to `metricsContainer.frame.minX - 8`. Called from initial card-build + every `windowDidResize`. Name now truncates with `.byTruncatingTail` instead of overflowing.
New ivar `detailMetricsContainer` lets the resize logic read the metric grid's actual position rather than re-deriving widths.
Test plan
Out of scope
A snapshot test for the detail card at three window widths would catch this whole class of bug. Filing as a follow-up — the existing `TacticalUITests` cover row / header / hover components but the identity-area layout has no test today.
🤖 Generated with Claude Code