style(sidepanel): align visual density + hierarchy to overlay [GET-17]#51
Conversation
TodayCard: replace 2x2 bordered-card grid with a single dense row (today 1 conv · 9 turns · 508 tok · $0.0050). Removes 20px hero numbers, uppercase labels, and card backgrounds that made the panel feel like a separate product. ActiveConversation: drop card border/background, reduce padding to 8px 0, shrink subject to 12px, context bar to 4px track, stats to 11px with tabular-nums and · dot separators via CSS ::before. Empty state keeps its dashed border. Health dot: 8px → 6px to match overlay spec; critical dot gains the lco-dot-pulse animation (box-shadow glow). Health label: 12px → 10px. Typography-wide: body 13px → 11px; budget status 13px → 11px, zone label 12px → 10px, row-pct gains tabular-nums; conv subject 13px → 12px, turns/cost gain tabular-nums. Section headers keep uppercase. prefers-reduced-motion: removes stale .lco-dash-metric rule, adds critical dot animation override.
|
@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 42 minutes and 42 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe PR refactors the dashboard UI by converting the Today card layout from a 2x2 grid to a single dense row of stats, abbreviates the token label from "tokens" to "tok" in the active conversation view, and applies comprehensive styling updates including reduced font sizes, a new health dot pulsing animation, improved numeric alignment, and modified spacing. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
entrypoints/sidepanel/dashboard.css (1)
273-275: Update the budget-dot note after shrinking the health dot.Line 274 makes health dots 6px, but budget dots remain 8px while the comment says they are the same size. Either update the comment or size the budget dot to 6px.
Also applies to: 388-391
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@entrypoints/sidepanel/dashboard.css` around lines 273 - 275, The comment and sizes are inconsistent: .lco-dash-health-dot was reduced to 6px but .lco-dash-budget-dot remains 8px; pick one fix: either change .lco-dash-budget-dot to width: 6px; height: 6px to match .lco-dash-health-dot, or update the comment that says both are the same size to reflect the differing sizes. Apply the same change wherever .lco-dash-health-dot and .lco-dash-budget-dot are defined (including the other occurrence mentioned).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@entrypoints/sidepanel/dashboard.css`:
- Line 283: The critical dot class .lco-dash-health-dot--critical currently
loses its box-shadow when the pulse animation lco-dot-pulse is disabled for
reduced motion; add a static box-shadow for .lco-dash-health-dot--critical
(matching the visual weight used by healthy/degrading states) so the emphasis
persists, and keep the pulse animation applied on top when motion is allowed; in
the prefers-reduced-motion: reduce media query remove/override only the
animation property but do NOT remove the static box-shadow for
.lco-dash-health-dot--critical so it remains visible even when animations are
disabled.
---
Nitpick comments:
In `@entrypoints/sidepanel/dashboard.css`:
- Around line 273-275: The comment and sizes are inconsistent:
.lco-dash-health-dot was reduced to 6px but .lco-dash-budget-dot remains 8px;
pick one fix: either change .lco-dash-budget-dot to width: 6px; height: 6px to
match .lco-dash-health-dot, or update the comment that says both are the same
size to reflect the differing sizes. Apply the same change wherever
.lco-dash-health-dot and .lco-dash-budget-dot are defined (including the other
occurrence mentioned).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 19f828c2-6504-455b-9d9b-dbdcf057303f
📒 Files selected for processing (3)
entrypoints/sidepanel/components/ActiveConversation.tsxentrypoints/sidepanel/components/TodayCard.tsxentrypoints/sidepanel/dashboard.css
Make .lco-dash a full-height flex column and give .lco-dash-feedback margin-top: auto. When sections are collapsed and content is short, the feedback widget is pushed to the viewport bottom; when History is expanded beyond the fold the panel scrolls and the widget sits at the end of content. Fixes the "empty black void below Send feedback" behaviour when History is collapsed.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
1 participant
Summary
The overlay widget and side panel were visually distinct enough to read as two separate products. TodayCard used a 2x2 bordered-card grid with 20px hero numbers and uppercase labels (Material / enterprise-dashboard feel). ActiveConversation had a card background and 14px subject text. This PR aligns both surfaces to overlay-style typography and density so they feel like one coherent tool.
Type of Change
refactor— Code restructure, no behavior changeWhat Was Changed
entrypoints/sidepanel/components/TodayCard.tsx— Replaced 2x2 card grid with a single dense row:today 1 conv · 9 turns · 508 tok · $0.0050. Removes.lco-dash-metric,.lco-dash-metric-value,.lco-dash-metric-labelJSX nodes.entrypoints/sidepanel/components/ActiveConversation.tsx— Changed"tokens"to"tok"in the stats row to match the compact label format.entrypoints/sidepanel/dashboard.css— Typography-wide alignment:.lco-dash-today-label/.lco-dash-today-statsflex rowlco-dot-pulseanimation; label 12px → 10pxbackground: var(--lco-bg-card)andborder; padding 12px → 8px 0; empty state keeps explicit dashed border::beforeprefers-reduced-motion: removes stale.lco-dash-metricrule, adds critical dot animation overrideHow to Test
.output/chrome-mv3)today N conv · N turns · N tok · $X) with no grid or hero numbers·separatorsprefers-reduced-motion(macOS: System Settings > Accessibility > Reduce motion) — pulse stops, section transitions instantChecklist
bun run test)bun run compile)bun run build)feat:,fix:,refactor:,test:,chore:)Related Issues
Closes GET-17
Notes for Reviewer
The
lco-dot-pulsekeyframe animatesbox-shadow(not compositor-only), which causes a paint per frame on the critical health dot. This is intentional and mirrors the identical pattern inoverlay-styles.ts. It only fires when health is critical and is gated byprefers-reduced-motion.Summary by CodeRabbit