authorgravatar for naMqe07@gmail.comnaMqe <naMqe07@gmail.com> 2026-08-09 02:02:57+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-08 20:02:57-04:00
logbe01b287b92b4686023a5e213078a2f51b3c1880
tree9f6b1e634664c64b050509a1430bd45d46939d70
parentc2f8cb7ca1576afd70294b98dfe1de9be17aacae
signature Signed by PGP key B5690EEEBB952194

fix(web): add missing cursor-pointer styling to dropdowns and interactive buttons (#5716)

7 files changed, 25 insertions(+), 25 deletions(-)

apps/web/src/components/RightPanelTabs.tsx+5-5
......@@ -185,7 +185,7 @@ function RightPanelEmptyState(props: {
185185 key={action.label}
186186 type="button"
187187 onClick={action.onClick}
188 className="flex min-h-28 w-full flex-col items-start rounded-lg border border-border/80 bg-card p-4 text-left transition hover:border-border hover:bg-accent/60 dark:border-transparent dark:shadow-none dark:inset-ring-1 dark:inset-ring-white/5"
188 className="cursor-pointer flex min-h-28 w-full flex-col items-start rounded-lg border border-border/80 bg-card p-4 text-left transition hover:border-border hover:bg-accent/60 dark:border-transparent dark:shadow-none dark:inset-ring-1 dark:inset-ring-white/5"
189189 >
190190 {content}
191191 </button>
......@@ -413,7 +413,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
413413 onAuxClick={(event) => handleTabAuxClick(event, surface)}
414414 onContextMenu={(event) => void handleTabContextMenu(event, surface)}
415415 className={cn(
416 "group/tab flex h-6 max-w-36 shrink-0 items-center gap-0.5 rounded-md pr-2 pl-1.5 text-xs",
416 "cursor-pointer group/tab flex h-6 max-w-36 shrink-0 items-center gap-0.5 rounded-md pr-2 pl-1.5 text-xs",
417417 active
418418 ? "bg-accent text-foreground"
419419 : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
......@@ -421,7 +421,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
421421 >
422422 <button
423423 type="button"
424 className="group/close relative flex size-4 shrink-0 items-center justify-center rounded-sm hover:bg-muted"
424 className="cursor-pointer group/close relative flex size-4 shrink-0 items-center justify-center rounded-sm hover:bg-muted"
425425 aria-label={`Close ${title}`}
426426 onClick={() => props.onCloseSurface(surface)}
427427 >
......@@ -445,7 +445,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
445445 render={
446446 <button
447447 type="button"
448 className="flex min-w-0 items-center"
448 className="cursor-pointer flex min-w-0 items-center"
449449 onClick={() => props.onActivate(surface)}
450450 >
451451 <span className="truncate">{title}</span>
......@@ -460,7 +460,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
460460 {props.surfaces.length > 0 ? (
461461 <Menu>
462462 <MenuTrigger
463 className="relative inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
463 className="cursor-pointer relative inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
464464 aria-label="Add panel surface"
465465 >
466466 <Plus className="size-3.5" />
apps/web/src/components/settings/DiagnosticsSettings.tsx+7-7
......@@ -103,7 +103,7 @@ function StatBlock({
103103 render={
104104 <button
105105 type="button"
106 className="inline-flex size-3.5 shrink-0 items-center justify-center rounded-sm text-muted-foreground/60 hover:text-foreground"
106 className="cursor-pointer inline-flex size-3.5 shrink-0 items-center justify-center rounded-sm text-muted-foreground/60 hover:text-foreground"
107107 aria-label={`${label} details`}
108108 >
109109 <InfoIcon className="size-3" />
......@@ -187,7 +187,7 @@ function ExpandableText({
187187 {canExpand ? (
188188 <button
189189 type="button"
190 className="mt-1 text-[11px] font-medium text-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
190 className="cursor-pointer mt-1 text-[11px] font-medium text-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
191191 onClick={() => setExpanded((value) => !value)}
192192 >
193193 {expanded ? "Show less" : expandLabel}
......@@ -274,7 +274,7 @@ function TraceIdCell({ traceId }: { traceId: string }) {
274274 render={
275275 <button
276276 type="button"
277 className="inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
277 className="cursor-pointer inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
278278 aria-label={copied ? "Copied trace ID" : "Copy trace ID"}
279279 onClick={() => copyToClipboard(traceId)}
280280 >
......@@ -323,7 +323,7 @@ function ProcessNameCell({
323323 {hasChildren ? (
324324 <button
325325 type="button"
326 className="inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
326 className="cursor-pointer inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
327327 aria-label={isExpanded ? `Collapse ${name}` : `Expand ${name}`}
328328 onClick={() => onToggle(process.pid)}
329329 >
......@@ -365,7 +365,7 @@ function ProcessSignalActions({
365365 <button
366366 type="button"
367367 disabled={isSignaling}
368 className="text-[11px] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline disabled:pointer-events-none disabled:opacity-50"
368 className="cursor-pointer text-[11px] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline disabled:pointer-events-none disabled:opacity-50"
369369 onClick={() => onSignal(process.pid, "SIGINT")}
370370 >
371371 INT
......@@ -380,7 +380,7 @@ function ProcessSignalActions({
380380 <button
381381 type="button"
382382 disabled={isSignaling}
383 className="text-[11px] font-medium text-destructive underline-offset-2 hover:underline disabled:pointer-events-none disabled:opacity-50"
383 className="cursor-pointer text-[11px] font-medium text-destructive underline-offset-2 hover:underline disabled:pointer-events-none disabled:opacity-50"
384384 onClick={() => onSignal(process.pid, "SIGKILL")}
385385 >
386386 KILL
......@@ -640,7 +640,7 @@ function ResourceHistoryWindowSelector({
640640 key={option.windowMs}
641641 type="button"
642642 className={cn(
643 "h-6 rounded-sm px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground",
643 "cursor-pointer h-6 rounded-sm px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground",
644644 selectedWindowMs === option.windowMs && "bg-muted text-foreground",
645645 )}
646646 onClick={() => onSelect(option.windowMs)}
apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx+4-4
......@@ -383,7 +383,7 @@ function HistoryWindowSelector({
383383 key={option.windowMs}
384384 type="button"
385385 className={cn(
386 "h-6 rounded-sm px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground",
386 "cursor-pointer h-6 rounded-sm px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground",
387387 selectedWindowMs === option.windowMs && "bg-muted text-foreground",
388388 )}
389389 onClick={() => onSelect(option.windowMs)}
......@@ -487,7 +487,7 @@ function ProcessTreeName({
487487 {hasChildren ? (
488488 <button
489489 type="button"
490 className="inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
490 className="cursor-pointer inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
491491 onClick={() => onToggle(process)}
492492 aria-label={collapsed ? `Expand ${name}` : `Collapse ${name}`}
493493 >
......@@ -538,7 +538,7 @@ function ProcessActions({
538538 <button
539539 type="button"
540540 disabled={isSignaling}
541 className="text-[10px] font-semibold text-muted-foreground hover:text-foreground disabled:opacity-50"
541 className="cursor-pointer text-[10px] font-semibold text-muted-foreground hover:text-foreground disabled:opacity-50"
542542 onClick={() => onSignal(process, "SIGINT")}
543543 >
544544 INT
......@@ -546,7 +546,7 @@ function ProcessActions({
546546 <button
547547 type="button"
548548 disabled={isSignaling}
549 className="text-[10px] font-semibold text-destructive hover:underline disabled:opacity-50"
549 className="cursor-pointer text-[10px] font-semibold text-destructive hover:underline disabled:opacity-50"
550550 onClick={() => onSignal(process, "SIGKILL")}
551551 >
552552 KILL
apps/web/src/components/ui/combobox.tsx+1-1
......@@ -200,7 +200,7 @@ function ComboboxItem({
200200 return (
201201 <ComboboxPrimitive.Item
202202 className={cn(
203 "flex min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center rounded-sm px-2 py-1 text-base outline-none hover:bg-accent data-disabled:pointer-events-none data-selected:bg-foreground/[0.08] data-selected:text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground [&[data-highlighted][data-selected]]:bg-accent [&[data-highlighted][data-selected]]:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
203 "flex min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-pointer items-center rounded-sm px-2 py-1 text-base outline-none hover:bg-accent data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-selected:bg-foreground/[0.08] data-selected:text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground [&[data-highlighted][data-selected]]:bg-accent [&[data-highlighted][data-selected]]:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
204204 className,
205205 )}
206206 data-slot="combobox-item"
apps/web/src/components/ui/menu.tsx+3-3
......@@ -78,7 +78,7 @@ function MenuItem({
7878 return (
7979 <MenuPrimitive.Item
8080 className={cn(
81 "[&>svg]:-mx-0.5 flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:[&>svg:not([class*='text-'])]:text-current [&>svg]:pointer-events-none [&>svg]:shrink-0",
81 "[&>svg]:-mx-0.5 flex min-h-8 cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:[&>svg:not([class*='text-'])]:text-current [&>svg]:pointer-events-none [&>svg]:shrink-0",
8282 className,
8383 )}
8484 data-inset={inset}
......@@ -102,7 +102,7 @@ function MenuCheckboxItem({
102102 <MenuPrimitive.CheckboxItem
103103 checked={checked}
104104 className={cn(
105 "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
105 "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-pointer items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
106106 variant === "switch" ? "grid-cols-[1fr_auto] gap-4 pe-1.5" : "grid-cols-[1rem_1fr] pe-4",
107107 className,
108108 )}
......@@ -158,7 +158,7 @@ function MenuRadioItem({
158158 return (
159159 <MenuPrimitive.RadioItem
160160 className={cn(
161 "flex min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center rounded-sm px-2 py-1 text-base text-foreground outline-none data-checked:bg-foreground/[0.08] data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
161 "flex min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-pointer items-center rounded-sm px-2 py-1 text-base text-foreground outline-none data-checked:bg-foreground/[0.08] data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
162162 className,
163163 )}
164164 data-slot="menu-radio-item"
apps/web/src/components/ui/select.tsx+1-1
......@@ -185,7 +185,7 @@ function SelectItem({
185185 return (
186186 <SelectPrimitive.Item
187187 className={cn(
188 "flex min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center rounded-sm px-2 py-1 text-base outline-none data-selected:bg-foreground/[0.08] data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
188 "flex min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-pointer items-center rounded-sm px-2 py-1 text-base outline-none data-selected:bg-foreground/[0.08] data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
189189 className,
190190 )}
191191 data-slot="select-item"
apps/web/src/components/usage/UsagePage.tsx+4-4
......@@ -71,7 +71,7 @@ export function UsagePage() {
7171 type="button"
7272 onClick={() => setWindowDays(option.days)}
7373 className={cn(
74 "px-3 py-1.5 text-xs",
74 "cursor-pointer px-3 py-1.5 text-xs",
7575 option.days === windowDays
7676 ? "bg-muted text-foreground"
7777 : "text-muted-foreground hover:text-foreground",
......@@ -85,7 +85,7 @@ export function UsagePage() {
8585 type="button"
8686 onClick={refresh}
8787 aria-label="Refresh usage"
88 className="rounded-md border border-border p-2 text-muted-foreground hover:text-foreground"
88 className="cursor-pointer rounded-md border border-border p-2 text-muted-foreground hover:text-foreground"
8989 >
9090 <RefreshCwIcon className="size-3.5" />
9191 </button>
......@@ -173,7 +173,7 @@ export function UsagePage() {
173173 type="button"
174174 onClick={() => setMetric(option)}
175175 className={cn(
176 "px-2.5 py-1 text-[10px] tracking-wide uppercase",
176 "cursor-pointer px-2.5 py-1 text-[10px] tracking-wide uppercase",
177177 option === metric
178178 ? "bg-muted text-foreground"
179179 : "text-muted-foreground hover:text-foreground",
......@@ -233,7 +233,7 @@ export function UsagePage() {
233233 type="button"
234234 onClick={() => setBreakdown(option)}
235235 className={cn(
236 "px-2.5 py-1 text-[10px] tracking-wide uppercase",
236 "cursor-pointer px-2.5 py-1 text-[10px] tracking-wide uppercase",
237237 option === breakdown
238238 ? "bg-muted text-foreground"
239239 : "text-muted-foreground hover:text-foreground",