Conversation
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
|
Cursor Agent can help with this pull request. Just |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@react-grab/cli
grab
@react-grab/ami
@react-grab/amp
@react-grab/claude-code
@react-grab/codex
@react-grab/copilot
@react-grab/cursor
@react-grab/droid
@react-grab/gemini
@react-grab/opencode
react-grab
@react-grab/relay
@react-grab/utils
commit: |
|
This run croaked 😵 The workflow encountered an error before any progress could be reported. Please check the workflow run logs for details. |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
10 issues found across 40 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/website/components/ui/scrollable.tsx">
<violation number="1" location="packages/website/components/ui/scrollable.tsx:20">
P1: Using `maxHeight` without an explicit height on `ScrollArea` can clip overflow content instead of enabling scrolling.</violation>
</file>
<file name="packages/website/components/ui/input.tsx">
<violation number="1" location="packages/website/components/ui/input.tsx:13">
P2: Input text size is below the documented mobile minimum (16px), which can cause iOS zoom-on-focus and poorer readability.</violation>
</file>
<file name="packages/website/e2e/blog-interactions.spec.ts">
<violation number="1" location="packages/website/e2e/blog-interactions.spec.ts:19">
P2: The hover color assertion is timing-sensitive and can be flaky because it checks computed color immediately after triggering a transitioned hover state.</violation>
</file>
<file name="packages/website/components/ui/card.tsx">
<violation number="1" location="packages/website/components/ui/card.tsx:1">
P2: Avoid marking this base Card primitive as a Client Component; the unnecessary `"use client"` boundary expands client-side bundling for all consumers.</violation>
</file>
<file name="packages/website/components/blocks/read-tool-call-block.tsx">
<violation number="1" location="packages/website/components/blocks/read-tool-call-block.tsx:47">
P2: Long parameter text will not wrap after migrating to shadcn `Button` because the base component enforces `whitespace-nowrap`.</violation>
</file>
<file name="packages/website/e2e/open-file-interactions.spec.ts">
<violation number="1" location="packages/website/e2e/open-file-interactions.spec.ts:57">
P2: This test claims keyboard selectability but uses mouse click for activation, so keyboard-only selection regressions can slip through.</violation>
</file>
<file name="packages/website/components/ui/button.tsx">
<violation number="1" location="packages/website/components/ui/button.tsx:52">
P1: The Button does not set a default `type`, so it implicitly becomes `submit` inside forms and can trigger unintended submissions.</violation>
</file>
<file name="packages/website/components/ui/table.tsx">
<violation number="1" location="packages/website/components/ui/table.tsx:1">
P2: Remove the unnecessary `"use client"` directive; this table primitive is server-safe and should not be forced into the client bundle.</violation>
</file>
<file name="packages/website/components/install-tabs.tsx">
<violation number="1" location="packages/website/components/install-tabs.tsx:387">
P2: The `Tabs` primitive applies `gap-4` (16px) by default via its base class `flex flex-col gap-4`. This className is not overridden here, so a visible 16px whitespace gap now appears between the `TabsList` header and the code content area. The original code used a plain `div` with no gap, keeping the tab bar flush against the content. Add `gap-0` to the className to preserve the original flush layout.</violation>
</file>
<file name="packages/website/components/benchmark-tooltip.tsx">
<violation number="1" location="packages/website/components/benchmark-tooltip.tsx:218">
P2: `HoverCardContent` is unmounted by Radix when the hover card closes, which means the `AnimatePresence` exit animation inside it never runs. The original implementation kept the tooltip DOM-mounted during exit, allowing the smooth fade-out and scale-down transition. Add `forceMount` to `HoverCardContent` (and conditionally render/hide it) so that `AnimatePresence` can orchestrate the exit animation before the element is removed from the DOM.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| style={{ maxHeight }} | ||
| > | ||
| <div className="relative"> | ||
| <ScrollArea className={cn("pr-2", className)} style={{ maxHeight }}> |
There was a problem hiding this comment.
P1: Using maxHeight without an explicit height on ScrollArea can clip overflow content instead of enabling scrolling.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/website/components/ui/scrollable.tsx, line 20:
<comment>Using `maxHeight` without an explicit height on `ScrollArea` can clip overflow content instead of enabling scrolling.</comment>
<file context>
@@ -13,104 +15,12 @@ export const Scrollable = ({
- style={{ maxHeight }}
- >
+ <div className="relative">
+ <ScrollArea className={cn("pr-2", className)} style={{ maxHeight }}>
{children}
- </div>
</file context>
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| </HoverCardContent> |
There was a problem hiding this comment.
HoverCard forceMount renders always-visible empty tooltip container
High Severity
HoverCardContent with forceMount keeps the Radix Popper-positioned container permanently mounted and visible in the DOM, even when the hover card is closed. The container has border, background, and shadow styles (from the base HoverCardContent classes) but no data-[state=closed]:hidden CSS to hide it when closed. The inner AnimatePresence only conditionally renders the chart content — the outer wrapper remains visible as an empty floating box near the "3× faster" link on the blog page. The old implementation conditionally rendered the entire tooltip only when hovered.
Additional Locations (1)
| <thead> | ||
| <tr className="border-b border-[#2a2a2a]"> | ||
| <th className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider"> | ||
| <Table className="max-w-2xl border-collapse text-sm"> |
There was a problem hiding this comment.
Table wrapper div breaks flex centering of summary table
Medium Severity
The Table component wraps <table> in <div className="relative w-full overflow-x-auto">. When placed inside the parent <div className="overflow-x-auto flex justify-center">, this wrapper's w-full makes it fill the entire flex container, so justify-center no longer has any visible effect. The old code had the <table> as a direct flex child with max-w-2xl, which allowed it to be centered. The summary metrics table now renders left-aligned instead of centered.
Additional Locations (1)
2 participants
Migrate all website components to use shadcn UI primitives to standardize UI, improve accessibility, and add comprehensive hover/focus state regression tests.
Summary by cubic
Migrated the website to shadcn UI primitives for consistent styling and better accessibility. Added Playwright tests to guard hover/focus states and fixed spacing issues found during review.
New Features
Refactors
Written for commit bfa87f9. Summary will update on new commits.
Note
Medium Risk
Moderate risk because it broadly replaces interactive elements (buttons, dropdowns, tabs, scroll areas, collapsibles, tables) with new Radix-based primitives across multiple pages, which can subtly affect behavior and accessibility. Added e2e coverage reduces regression risk but UI/keyboard interactions still need review across browsers.
Overview
Migrates the website’s interactive UI from bespoke elements/styles to shadcn-style primitives (new
Button,Badge,Card,Input,Table,Tabs,Separator) and Radix wrappers (DropdownMenu,HoverCard,ScrollArea,Collapsible), updating multiple pages/components to useasChildlinks and consistentfocus-visiblering styling.Refactors key interactions:
open-fileeditor selector is now a Radix dropdown,BenchmarkTooltipuses a Radix hover card with delayed open, benchmark tables and install tabs render via shared UI primitives, andScrollablenow delegates to Radix scroll area instead of custom scrollbar logic.Adds Playwright e2e tests focused on hover/focus state regressions across homepage/blog/benchmarks/open-file, plus new
typecheckandtest:e2escripts, Radix/Playwright dependencies, and config updates (includingcomponents.jsonutils alias and new TS module declarations).Written by Cursor Bugbot for commit bfa87f9. This will update automatically on new commits. Configure here.