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: {...@@ -366,19 +366,26 @@ function SnoozePopoverButton(props: {
366 );366 );
367 return (367 return (
368 <Popover open={open} onOpenChange={onOpenChange}>368 <Popover open={open} onOpenChange={onOpenChange}>
369 <PopoverTrigger369 <Tooltip>
370 render={370 <TooltipTrigger
371 <button371 render={
372 type="button"372 <PopoverTrigger
373 aria-label="Snooze thread"373 render={
374 onClick={(event) => event.stopPropagation()}374 <button
375 onDoubleClick={(event) => event.stopPropagation()}375 type="button"
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"376 aria-label="Snooze thread"
377 />377 onClick={(event) => event.stopPropagation()}
378 }378 onDoubleClick={(event) => event.stopPropagation()}
379 >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 <ClockIcon className="size-3" />380 />
381 </PopoverTrigger>381 }
382 />
383 }
384 >
385 <ClockIcon className="size-3" />
386 </TooltipTrigger>
387 <TooltipPopup>Snooze thread</TooltipPopup>
388 </Tooltip>
382 <PopoverPopup side="bottom" align="end" className="w-56" viewportClassName="p-1">389 <PopoverPopup side="bottom" align="end" className="w-56" viewportClassName="p-1">
383 {presets.map((preset) => (390 {presets.map((preset) => (
384 <button391 <button
...@@ -1312,15 +1319,21 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {...@@ -1312,15 +1319,21 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
1312 )}1319 )}
1313 {props.isPinned ? (1320 {props.isPinned ? (
1314 props.pinningSupported ? (1321 props.pinningSupported ? (
1315 <button1322 <Tooltip>
1316 type="button"1323 <TooltipTrigger
1317 aria-label="Unpin thread"1324 render={
1318 title="Unpin thread"1325 <button
1319 onClick={handleUnpinClick}1326 type="button"
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"1327 aria-label="Unpin thread"
1321 >1328 onClick={handleUnpinClick}
1322 <PinIcon aria-hidden className="size-3 shrink-0" />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"
1323 </button>1330 />
1331 }
1332 >
1333 <PinIcon aria-hidden className="size-3 shrink-0" />
1334 </TooltipTrigger>
1335 <TooltipPopup>Unpin thread</TooltipPopup>
1336 </Tooltip>
1324 ) : (1337 ) : (
1325 <PinIcon1338 <PinIcon
1326 aria-label="Pinned"1339 aria-label="Pinned"
...@@ -1409,15 +1422,22 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {...@@ -1409,15 +1422,22 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
1409 />1422 />
1410 ) : null}1423 ) : null}
1411 {props.settlementSupported ? (1424 {props.settlementSupported ? (
1412 <button1425 <Tooltip>
1413 type="button"1426 <TooltipTrigger
1414 aria-label="Settle thread"1427 render={
1415 onClick={handleSettleClick}1428 <button
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"1429 type="button"
1417 >1430 aria-label="Settle thread"
1418 <CheckIcon className="size-3.5" />1431 onClick={handleSettleClick}
1419 Settle1432 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"
1420 </button>1433 />
1434 }
1435 >
1436 <CheckIcon className="size-3.5" />
1437 Settle
1438 </TooltipTrigger>
1439 <TooltipPopup>Settle thread</TooltipPopup>
1440 </Tooltip>
1421 ) : null}1441 ) : null}
1422 </span>1442 </span>
1423 ) : null}1443 ) : null}