🐛 Fix card shadows, Trestle flicker, duplicate cancel text#4329
🐛 Fix card shadows, Trestle flicker, duplicate cancel text#4329clubanderson merged 1 commit intomainfrom
Conversation
, #4286) - Reduce card shadow intensity in light mode by adding .light .glass override with subtle box-shadow values instead of the heavy dark-mode shadows - Buffer Trestle cluster check results and apply a single state update instead of streaming per-cluster updates that caused the card to flicker through intermediate states - Remove duplicate "Cancelling..." badge from MissionChat header since the status icon and input area already show the cancelling state Signed-off-by: Andrew Anderson <andy@clubanderson.com>
kubestellar-prow
bot
added
the
dco-signoff: yes
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
✅ Deploy Preview for kubestellarconsole ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
kubestellar-prow
bot
added
the
size/S
|
👋 Hey @clubanderson — thanks for opening this PR!
This is an automated message. |
|
Thank you for your contribution! Your PR has been merged. Check out what's new:
Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey |
There was a problem hiding this comment.
Pull request overview
Addresses three UI/UX bugs across card styling, the Compliance Trestle card loading behavior, and mission cancellation messaging.
Changes:
- Adds a light-mode-specific
.glassshadow override to reduce harsh card shadows. - Updates
useTrestleto buffer per-cluster results and commit a single state update to avoid intermediate UI flicker. - Removes the extra “Cancelling...” header badge from the mission sidebar chat header.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
web/src/index.css |
Adds a light-mode .glass box-shadow override to soften card shadows. |
web/src/hooks/useTrestle.ts |
Buffers Trestle cluster checks and updates state once after all checks settle. |
web/src/components/layout/mission-sidebar/MissionChat.tsx |
Removes the cancelling badge from the header to reduce duplicate cancellation messaging. |
Comments suppressed due to low confidence (1)
web/src/components/layout/mission-sidebar/MissionChat.tsx:412
- After removing the header badge, the UI still shows cancelling text in at least two places:
config.labelin the header (fromSTATUS_CONFIG.cancelling, currently "Cancelling...") and the input area message ("Cancelling mission..."). This doesn’t match the PR description/test plan that expects only one cancelling indicator. Consider suppressing the header label forcancelling, or removing/shortening the input-area text so only one cancelling message is visible.
<div className={cn('flex items-center gap-1', config.color)}>
<StatusIcon className={cn('w-4 h-4', (mission.status === 'running' || mission.status === 'cancelling') && 'animate-spin')} />
<span className="text-xs">{config.label}</span>
</div>
| const allStatuses: Record<string, TrestleClusterStatus> = {} | ||
| let checked = 0 | ||
|
|
||
| const tasks = (clusterNames || []).map(cluster => async () => { | ||
| const status = await fetchSingleCluster(cluster) | ||
| allStatuses[cluster] = status | ||
| if (mountedRef.current) { | ||
| // Stream each result immediately — card re-renders progressively | ||
| setStatuses(prev => ({ ...prev, [cluster]: status })) | ||
| setClustersChecked(prev => prev + 1) | ||
| // Clear initial loading after first result arrives | ||
| setIsLoading(false) | ||
| } | ||
| checked++ | ||
| }) |
There was a problem hiding this comment.
checked++ introduces additional outer-scope mutation inside a settledWithConcurrency task callback. This codebase has a concurrent-mutation safety scan (web/src/test/concurrent-mutation-safety.test.ts) that recommends returning values from concurrency callbacks and aggregating after the settled call to avoid interleaved writes. Consider having each task return { cluster, status } (or a tuple) and computing checked from the settled results, instead of mutating checked/allStatuses inside the callback.
🔄 Auto-Applying Copilot Code ReviewCopilot code review found 0 code suggestion(s) and 1 general comment(s). Also address these general comments:
Push all fixes in a single commit. Run Auto-generated by copilot-review-apply workflow. |
Summary
.light .glassCSS override with subtle box-shadow values. The dark-mode.glassclass uses heavy inset/outer shadows (rgba(0,0,0,0.85)) that look harsh in light mode. The override uses gentle0.08/0.06opacity shadows.useTrestlehook to buffer all cluster check results and apply a single state update at the end, instead of streaming per-cluster results that caused the card to re-render with intermediate values (scores jumping, profiles appearing one by one).Fixes #4254
Fixes #4266
Fixes #4286
Test plan