fix(web): show completed pull request checks and align rows

apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx

@@ -68,31 +68,40 @@ function ChecksBody({
   const { attention, running, completed } = groupPullRequestChecks(checks);
   const canCollapse = attention.length + running.length > 0 && completed.length > 0;
   const visibleChecks = [...attention, ...running, ...(showAll || !canCollapse ? completed : [])];
+  const hasDetails = visibleChecks.some((check) => check.url !== null);
   if (checks.length === 0) {
     return <p className="text-muted-foreground text-xs">No checks reported</p>;
   }
   return (
     <>
       <ScrollArea className="max-h-64">
-        <ul className="flex flex-col gap-1">
+        <ul
+          className={cn(
+            "grid gap-x-2 gap-y-1",
+            hasDetails
+              ? "grid-cols-[auto_minmax(0,1fr)_auto_auto]"
+              : "grid-cols-[auto_minmax(0,1fr)_auto]",
+          )}
+        >
           {/* Keyed by position as well as by name: the host is the one that decides how many runs
           share a name, and a repeated key is a rendering fault rather than a wrong list. */}
           {visibleChecks.map((check, index) => (
-            <li key={`${index}:${check.name}`} className="flex items-center gap-2 text-xs">
+            <li
+              key={`${index}:${check.name}`}
+              className="col-span-full grid grid-cols-subgrid items-center text-xs"
+            >
               <PullRequestCheckStatusIcon status={check.status} />
               <Tooltip>
-                <TooltipTrigger
-                  render={<span className="min-w-0 flex-1 truncate">{check.name}</span>}
-                />
+                <TooltipTrigger render={<span className="min-w-0 truncate">{check.name}</span>} />
                 <TooltipPopup side="top">{check.description ?? check.name}</TooltipPopup>
               </Tooltip>
-              <span className="shrink-0 text-muted-foreground">
+              <span className="justify-self-end whitespace-nowrap text-muted-foreground">
                 {pullRequestCheckStatusLabel(check)}
               </span>
               {check.url === null ? null : (
                 <button
                   type="button"
-                  className="shrink-0 text-primary hover:underline"
+                  className="text-primary hover:underline"
                   onClick={() => {
                     if (!check.url) return;
                     void openLink(check.url).catch((error: unknown) => {
@@ -154,7 +163,9 @@ export function PullRequestChecksPopover({
 }) {
   const presentation = pullRequestChecksStatePresentation(checksState);
   // Counts beat the rollup's own wording where they are known, the way GitHub's own header reads.
-  const runningCount = checks?.filter((check) => check.status === "pending").length ?? 0;
+  const incompleteCount =
+    checks?.filter((check) => check.status === "pending" || check.status === "action-required")
+      .length ?? 0;
   const failedCount =
     checks?.filter((check) => check.status === "failure" || check.status === "cancelled").length ??
     0;
@@ -187,9 +198,9 @@ export function PullRequestChecksPopover({
         <presentation.Icon aria-hidden className={cn("size-3.5", presentation.toneClassName)} />
         {variant === "count" ? (
           <>
-            {checks !== undefined && runningCount > 0 ? (
+            {checks !== undefined && incompleteCount > 0 ? (
               <span className="tabular-nums">
-                {runningCount}/{checks.length}
+                {checks.length - incompleteCount}/{checks.length}
               </span>
             ) : failedCount > 0 ? (
               <span className="tabular-nums">{failedCount} failed</span>