|
5 | 5 | } from "@t3tools/contracts"; |
6 | 6 | import { memo } from "react"; |
7 | 7 | import { ChevronRightIcon, TriangleAlertIcon } from "lucide-react"; |
8 | | -import { Button } from "../ui/button"; |
| 8 | +import { Button, buttonVariants } from "../ui/button"; |
9 | 9 | import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu"; |
10 | 10 | import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; |
11 | 11 | import { composerFloatingLayerProps } from "./composerEventScope"; |
@@ -79,24 +79,36 @@ export const ComposerPendingApprovalActions = memo(function ComposerPendingAppro |
79 | 79 | {...composerFloatingLayerProps} |
80 | 80 | side="top" |
81 | 81 | align="end" |
82 | | - className="max-w-[min(22rem,calc(100vw-2rem))]" |
| 82 | + className="w-56 max-w-[calc(100vw-2rem)]" |
83 | 83 | > |
84 | | - {moreOptions.map((option) => ( |
85 | | - <MenuItem |
86 | | - key={option.decision} |
87 | | - disabled={isResponding} |
88 | | - onClick={() => void onRespondToApproval(requestId, option.decision)} |
89 | | - className="items-start" |
90 | | - > |
91 | | - {option.warning ? <TriangleAlertIcon className="mt-0.5 text-warning" /> : null} |
92 | | - <span className="min-w-0 whitespace-normal wrap-break-word"> |
93 | | - {option.label} |
94 | | - {option.warning ? ( |
95 | | - <span className="mt-1 block text-xs text-warning">{option.warning}</span> |
96 | | - ) : null} |
97 | | - </span> |
98 | | - </MenuItem> |
99 | | - ))} |
| 84 | + {moreOptions.map((option) => { |
| 85 | + const item = ( |
| 86 | + <MenuItem |
| 87 | + key={option.decision} |
| 88 | + disabled={isResponding} |
| 89 | + aria-description={option.warning} |
| 90 | + onClick={() => void onRespondToApproval(requestId, option.decision)} |
| 91 | + className={buttonVariants({ |
| 92 | + variant: "outline", |
| 93 | + size: "compact", |
| 94 | + className: "mb-1 h-auto min-h-7 w-full last:mb-0 sm:text-xs", |
| 95 | + })} |
| 96 | + > |
| 97 | + {option.warning ? <TriangleAlertIcon className="size-3 text-warning" /> : null} |
| 98 | + <span className="min-w-0 whitespace-normal wrap-break-word">{option.label}</span> |
| 99 | + </MenuItem> |
| 100 | + ); |
| 101 | + return option.warning ? ( |
| 102 | + <Tooltip key={option.decision}> |
| 103 | + <TooltipTrigger render={item} /> |
| 104 | + <TooltipPopup side="top" className="max-w-64 text-xs leading-snug"> |
| 105 | + {option.warning} |
| 106 | + </TooltipPopup> |
| 107 | + </Tooltip> |
| 108 | + ) : ( |
| 109 | + item |
| 110 | + ); |
| 111 | + })} |
100 | 112 | </MenuPopup> |
101 | 113 | </Menu> |
102 | 114 | ) : null} |
|
0 commit comments