authorgravatar for 269035359+t3-code[bot]@users.noreply.github.comt3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> 2026-08-14 19:43:33+00:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-14 19:43:33+00:00
log196c8ea0d642acd1db66bd57f5d98abe81d8da6e
tree612f3e78df257fc5bdc40a5734cc5554d7fbaa3f
parentc9063f03ea1c16e0239e1996a9b6ef611679995d
signature Signed by PGP key B5690EEEBB952194

fix(web): style sidebar action tooltips (#6371)

Co-authored-by: t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> Co-authored-by: Utkarsh Patil <73941998+UtkarshUsername@users.noreply.github.com>

1 files changed, 51 insertions(+), 31 deletions(-)

apps/web/src/components/Sidebar.tsx+51-31
......@@ -366,19 +366,26 @@ function SnoozePopoverButton(props: {
366366 );
367367 return (
368368 <Popover open={open} onOpenChange={onOpenChange}>
369 <PopoverTrigger
370 render={
371 <button
372 type="button"
373 aria-label="Snooze thread"
374 onClick={(event) => event.stopPropagation()}
375 onDoubleClick={(event) => event.stopPropagation()}
376 className="inline-flex h-full cursor-pointer items-center gap-0.5 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground hover:text-foreground"
377 />
378 }
379 >
380 <ClockIcon className="size-3" />
381 </PopoverTrigger>
369 <Tooltip>
370 <TooltipTrigger
371 render={
372 <PopoverTrigger
373 render={
374 <button
375 type="button"
376 aria-label="Snooze thread"
377 onClick={(event) => event.stopPropagation()}
378 onDoubleClick={(event) => event.stopPropagation()}
379 className="inline-flex h-full cursor-pointer items-center gap-0.5 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground hover:text-foreground"
380 />
381 }
382 />
383 }
384 >
385 <ClockIcon className="size-3" />
386 </TooltipTrigger>
387 <TooltipPopup>Snooze thread</TooltipPopup>
388 </Tooltip>
382389 <PopoverPopup side="bottom" align="end" className="w-56" viewportClassName="p-1">
383390 {presets.map((preset) => (
384391 <button
......@@ -1312,15 +1319,21 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
13121319 )}
13131320 {props.isPinned ? (
13141321 props.pinningSupported ? (
1315 <button
1316 type="button"
1317 aria-label="Unpin thread"
1318 title="Unpin thread"
1319 onClick={handleUnpinClick}
1320 className="inline-flex cursor-pointer items-center rounded-sm text-muted-foreground/65 outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
1321 >
1322 <PinIcon aria-hidden className="size-3 shrink-0" />
1323 </button>
1322 <Tooltip>
1323 <TooltipTrigger
1324 render={
1325 <button
1326 type="button"
1327 aria-label="Unpin thread"
1328 onClick={handleUnpinClick}
1329 className="inline-flex cursor-pointer items-center rounded-sm text-muted-foreground/65 outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
1330 />
1331 }
1332 >
1333 <PinIcon aria-hidden className="size-3 shrink-0" />
1334 </TooltipTrigger>
1335 <TooltipPopup>Unpin thread</TooltipPopup>
1336 </Tooltip>
13241337 ) : (
13251338 <PinIcon
13261339 aria-label="Pinned"
......@@ -1409,15 +1422,22 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
14091422 />
14101423 ) : null}
14111424 {props.settlementSupported ? (
1412 <button
1413 type="button"
1414 aria-label="Settle thread"
1415 onClick={handleSettleClick}
1416 className="-mr-1 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground hover:text-foreground"
1417 >
1418 <CheckIcon className="size-3.5" />
1419 Settle
1420 </button>
1425 <Tooltip>
1426 <TooltipTrigger
1427 render={
1428 <button
1429 type="button"
1430 aria-label="Settle thread"
1431 onClick={handleSettleClick}
1432 className="-mr-1 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground hover:text-foreground"
1433 />
1434 }
1435 >
1436 <CheckIcon className="size-3.5" />
1437 Settle
1438 </TooltipTrigger>
1439 <TooltipPopup>Settle thread</TooltipPopup>
1440 </Tooltip>
14211441 ) : null}
14221442 </span>
14231443 ) : null}