fix(chat): three smoke-test polish issues — checkpoint pill, destructive button, section headers#285
Merged
Merged
Conversation
…ive button, section headers 1. Checkpoint marker hover pill position Root cause: `.chat-checkpoint-marker__pill` is `position: absolute` with `top: 50%`, but the marker's `:host` had no `position`. The pill cascaded up to the nearest positioned ancestor (`.chat-message__layout`) and landed ~250px below the dot. Fix: set `position: relative` on the host so the pill anchors to the dot's own bounding box. Spec asserts `getComputedStyle(host).position`. 2. Destructive confirm dialog button — poor contrast Root cause: the destructive variant used `background: var(--ngaf-chat-error-text)`. In dark mode that token resolves to `#fca5a5` (light pink) — paired with `color: #fff` this gave unreadable white-on-pink contrast. Fix: introduce `--ngaf-chat-destructive` (`#dc2626` light / `#ef4444` dark) in both `chat.css` and the JS `CHAT_HOST_TOKENS` fallbacks, and switch the destructive button to that token. Adds a subtle `filter: brightness(1.1)` on hover. Spec guards against regressing to the error-text token. 3. Sidenav section headers (Projects / Recent / Archived) — lighter + smaller Reduce visual prominence so they sit below thread row text: `font-size: 11px`, `letter-spacing: 0.4px`. Both `.chat-sidenav__threads-heading` (Projects, Recent) and `.chat-sidenav__archived-heading` (Archived) get the same treatment so all three section labels render identically.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Summary
Three independent UI polish fixes surfaced by smoke testing the chat library.
1. Checkpoint marker hover pill misplaced
Root cause:
.chat-checkpoint-marker__pillisposition: absolutewithtop: 50%, but the marker's:hosthad nopositiondeclaration. The pill therefore cascaded up to the nearest positioned ancestor (.chat-message__layout) and rendered ~250px below the dot it was supposed to anchor to.Fix: add
position: relativeto the marker's:hostblock so the pill'stop: 50%resolves against the host's tight bounding box around the dot. New spec assertsgetComputedStyle(host).position === 'relative'.2. Destructive confirm dialog button — poor contrast
Root cause: the destructive variant used
background: var(--ngaf-chat-error-text). In dark mode that token resolves to#fca5a5(light pink). Combined withcolor: #fffthe button rendered as unreadable white-on-pink.Fix: introduce a dedicated
--ngaf-chat-destructivetoken defaulting to a saturated red on both themes (#dc2626light /#ef4444dark). Declared inchat.css(:root,prefers-color-scheme: dark,[data-ngaf-chat-theme="dark"]) and the parallel JS fallbacks inchat-tokens.ts(LIGHT_TOKENS,DARK_TOKENS). The destructive class switches to the new token and gains a subtlefilter: brightness(1.1)on hover. Spec guards against re-introducing the error-text token.3. Sidenav section headers (Projects / Recent / Archived) — lighter + smaller
Reduce visual prominence so the labels sit clearly below thread row text instead of competing with it. Both
.chat-sidenav__threads-heading(used for Projects and Recent) and.chat-sidenav__archived-heading(the collapsible Archived header) now usefont-size: 11pxandletter-spacing: 0.4px, keepingcolor: var(--ngaf-chat-text-muted)so the color tracks the theme.Test plan
npx nx test chat— 84/84 files pass, 616/616 tests passnpx nx build chat— succeedsnpx nx lint chat— succeedsnpm run generate-api-docs— chat docs regenerated cleanly (185 entries)