Makes the “hiddenButtons” support a single button instead of adding a new property

Author: samejr

apps/webapp/app/components/primitives/Table.tsx

@@ -21,7 +21,7 @@ const variants = {
     stickyCell: "group-hover/table-row:bg-charcoal-800",
     menuButton:
       "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
-    menuButtonDivider: "group-hover/table-row:border-grid-dimmed",
+    menuButtonDivider: "group-hover/table-row:border-grid-bright",
     rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
   },
 } as const;
@@ -302,7 +302,6 @@ export const TableCellMenu = forwardRef<
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     visibleButtons?: ReactNode;
     hiddenButtons?: ReactNode;
-    hiddenSoloButton?: ReactNode;
     popoverContent?: ReactNode;
     children?: ReactNode;
     isSelected?: boolean;
@@ -315,7 +314,6 @@ export const TableCellMenu = forwardRef<
       onClick,
       visibleButtons,
       hiddenButtons,
-      hiddenSoloButton,
       popoverContent,
       children,
       isSelected,
@@ -346,17 +344,14 @@ export const TableCellMenu = forwardRef<
             {hiddenButtons && (
               <div
                 className={cn(
-                  "hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r",
+                  "hidden group-hover/table-row:block",
+                  popoverContent && "pr-0.5 group-hover/table-row:border-r",
                   variants[variant].menuButtonDivider
                 )}
               >
-                {hiddenButtons}
+                <div className={cn("flex items-center gap-x-0.5")}>{hiddenButtons}</div>
               </div>
             )}
-            {/* Hidden solo button that shows on hover. To be used without the ellipsis popover content */}
-            {hiddenSoloButton && (
-              <div className={cn("hidden group-hover/table-row:block")}>{hiddenSoloButton}</div>
-            )}
             {/* Always visible buttons  */}
             {visibleButtons}
             {/* Always visible popover with ellipsis trigger */}

apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

@@ -472,7 +472,7 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) {
         </>
       }
       hiddenButtons={
-        <div className="flex items-center">
+        <>
           {run.isCancellable && (
             <SimpleTooltip
               button={
@@ -518,7 +518,7 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) {
               disableHoverableContent
             />
           )}
-        </div>
+        </>
       }
     />
   );

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx

@@ -399,9 +399,7 @@ export default function Page() {
                         <TableCellMenu
                           isSticky
                           visibleButtons={queue.paused && <QueuePauseResumeButton queue={queue} />}
-                          hiddenSoloButton={
-                            !queue.paused && <QueuePauseResumeButton queue={queue} />
-                          }
+                          hiddenButtons={!queue.paused && <QueuePauseResumeButton queue={queue} />}
                         />
                       </TableRow>
                     ))