@oneuptime/common 12.0.31 → 12.0.33

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -41,6 +41,7 @@ import useChartAnnotations, {
   UseChartAnnotationsResult,
 } from "../Annotations/UseChartAnnotations";
 import { cx } from "../Utils/Cx";
+import { DOUBLE_CLICK_DISAMBIGUATION_MS } from "../Utils/DoubleClick";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
 import {
@@ -643,6 +644,15 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Double-click on the plot surface: the counterpart to drag-to-select,
+   * for undoing the zoom it produced. Supplying it makes single clicks
+   * wait DOUBLE_CLICK_DISAMBIGUATION_MS before they act, so a double-click
+   * cannot also fire the bucket-click path twice on its way past — hosts
+   * that have nothing to reset should leave it undefined and keep clicks
+   * instant.
+   */
+  onTimeRangeReset?: (() => void) | undefined;
   /**
    * Plain click on a time bucket (the plot background — dot/legend clicks
    * and drag-selections never reach this). [bucketStart, bucketEnd) uses
@@ -702,6 +712,7 @@ const LineChart: React.ForwardRefExoticComponent<
       formattedTimeReferenceLines,
       formattedReferenceRegions,
       onTimeRangeSelect,
+      onTimeRangeReset,
       onBucketClick,
       ghostCategories,
       ...other
@@ -732,9 +743,26 @@ const LineChart: React.ForwardRefExoticComponent<
       React.useRef<number | null>(null);
     const suppressNextClickRef: React.MutableRefObject<boolean> =
       React.useRef<boolean>(false);
+    const hasOnTimeRangeReset: boolean = Boolean(onTimeRangeReset);
+    /*
+     * A pending single-click, held open long enough for a second click to
+     * cancel it. Only armed when onTimeRangeReset is supplied.
+     */
+    const pendingClickTimeoutRef: React.MutableRefObject<ReturnType<
+      typeof setTimeout
+    > | null> = React.useRef<ReturnType<typeof setTimeout> | null>(null);
     const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
+    React.useEffect(() => {
+      return () => {
+        if (pendingClickTimeoutRef.current !== null) {
+          clearTimeout(pendingClickTimeoutRef.current);
+          pendingClickTimeoutRef.current = null;
+        }
+      };
+    }, []);
+
     /*
      * Annotations are drawn onto the categorical axis, so the layer needs
      * the same x values recharts is drawing — not the source dates.
@@ -978,6 +1006,51 @@ const LineChart: React.ForwardRefExoticComponent<
       onTimeRangeSelect(startDate, endDate);
     }
 
+    /*
+     * The plain-click path, split out so it can either run inline (no
+     * reset handler) or be deferred behind the double-click window.
+     */
+    function handleChartClick(chartState: RangeSelectionChartState): void {
+      /*
+       * A click while a legend/dot selection is active keeps its
+       * long-standing meaning — clear the selection — and never
+       * also pins a bucket.
+       */
+      if (hasOnValueChange && (activeLegend || activeDot)) {
+        setActiveDot(undefined);
+        setActiveLegend(undefined);
+        onValueChange?.(null);
+        return;
+      }
+      if (!onBucketClick) {
+        return;
+      }
+      const rowIndex: number | null = getRowIndexFromChartState(chartState);
+      if (rowIndex === null) {
+        return;
+      }
+      const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
+      if (!bucketStart) {
+        return;
+      }
+      /*
+       * Cover the full bucket: width from adjacent row dates, the
+       * same derivation drag-to-select uses.
+       */
+      const adjacentBucketDate: Date | null =
+        rowIndex > 0
+          ? getBucketDateAtIndex(rowIndex - 1)
+          : getBucketDateAtIndex(rowIndex + 1);
+      const clickedBucketWidthInMs: number = adjacentBucketDate
+        ? Math.abs(bucketStart.getTime() - adjacentBucketDate.getTime())
+        : 0;
+      onBucketClick(
+        bucketStart,
+        new Date(bucketStart.getTime() + clickedBucketWidthInMs),
+        (data[rowIndex] || {}) as Record<string, number | string>,
+      );
+    }
+
     return (
       <div
         ref={ref}
@@ -1016,46 +1089,35 @@ const LineChart: React.ForwardRefExoticComponent<
                 if (suppressNextClickRef.current) {
                   return;
                 }
-                /*
-                 * A click while a legend/dot selection is active keeps its
-                 * long-standing meaning — clear the selection — and never
-                 * also pins a bucket.
-                 */
-                if (hasOnValueChange && (activeLegend || activeDot)) {
-                  setActiveDot(undefined);
-                  setActiveLegend(undefined);
-                  onValueChange?.(null);
-                  return;
-                }
-                if (!onBucketClick) {
-                  return;
-                }
-                const rowIndex: number | null =
-                  getRowIndexFromChartState(chartState);
-                if (rowIndex === null) {
-                  return;
-                }
-                const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
-                if (!bucketStart) {
+                if (!hasOnTimeRangeReset) {
+                  handleChartClick(chartState);
                   return;
                 }
                 /*
-                 * Cover the full bucket: width from adjacent row dates, the
-                 * same derivation drag-to-select uses.
+                 * Reset is on, so hold the click open: both clicks of a
+                 * double-click arrive before dblclick does, and neither
+                 * may pin a bucket. The second click re-arms the timer,
+                 * dblclick clears it.
                  */
-                const adjacentDate: Date | null =
-                  rowIndex > 0
-                    ? getBucketDateAtIndex(rowIndex - 1)
-                    : getBucketDateAtIndex(rowIndex + 1);
-                const bucketWidthInMs: number = adjacentDate
-                  ? Math.abs(bucketStart.getTime() - adjacentDate.getTime())
-                  : 0;
-                onBucketClick(
-                  bucketStart,
-                  new Date(bucketStart.getTime() + bucketWidthInMs),
-                  (data[rowIndex] || {}) as Record<string, number | string>,
-                );
+                if (pendingClickTimeoutRef.current !== null) {
+                  clearTimeout(pendingClickTimeoutRef.current);
+                }
+                pendingClickTimeoutRef.current = setTimeout(() => {
+                  pendingClickTimeoutRef.current = null;
+                  handleChartClick(chartState);
+                }, DOUBLE_CLICK_DISAMBIGUATION_MS);
               }}
+              {...(hasOnTimeRangeReset
+                ? {
+                    onDoubleClick: () => {
+                      if (pendingClickTimeoutRef.current !== null) {
+                        clearTimeout(pendingClickTimeoutRef.current);
+                        pendingClickTimeoutRef.current = null;
+                      }
+                      onTimeRangeReset?.();
+                    },
+                  }
+                : {})}
               margin={{
                 /*
                  * Tick labels are 10px font with a translate(0, 6) — they

package/UI/Components/Charts/ChartLibrary/Utils/DoubleClick.ts

@@ -0,0 +1,13 @@
+/**
+ * How long a chart holds a single click open, waiting to see whether it is
+ * really the first half of a double-click.
+ *
+ * Charts that accept `onTimeRangeReset` have to tell a bucket click apart
+ * from a reset gesture, and the browser delivers BOTH clicks of a
+ * double-click before it delivers `dblclick` — so the only way a
+ * double-click can avoid also pinning a bucket twice is for the click path
+ * to wait. Kept just above the ~200ms most platforms use as their
+ * double-click threshold, and short enough that a real single click still
+ * feels immediate. Charts with no reset handler skip the wait entirely.
+ */
+export const DOUBLE_CLICK_DISAMBIGUATION_MS: number = 250;

package/UI/Components/Charts/Line/LineChart.tsx

@@ -62,6 +62,12 @@ export interface ComponentProps {
    * buckets calls back with the [start, end) of the selected time range.
    */
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /*
+   * Double-click on the plot: undoes whatever drag-to-select produced.
+   * Supply it only when a reset is actually possible — see ChartLibrary
+   * onTimeRangeReset for why an idle handler costs click latency.
+   */
+  onTimeRangeReset?: (() => void) | undefined;
   // Plain click on a bucket — see ChartLibrary onBucketClick.
   onBucketClick?:
     | ((
@@ -221,6 +227,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         }
         onExemplarClick={props.onExemplarClick}
         onTimeRangeSelect={props.onTimeRangeSelect}
+        onTimeRangeReset={props.onTimeRangeReset}
         onBucketClick={props.onBucketClick}
         ghostCategories={props.ghostSeriesNames}
       />

package/UI/Components/CommandPalette/CommandPalette.tsx

@@ -8,7 +8,7 @@ import KeyboardKey, {
 } from "../KeyboardShortcut/KeyboardKey";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
-import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
+import { usePageScrollLock } from "../../Utils/PageScrollLock";
 import {
   PaletteCommand,
   PaletteSearchProvider,
@@ -194,13 +194,7 @@ const CommandPalettePanel: FunctionComponent<PanelProps> = (
   }, []);
 
   // The page behind the palette must not scroll while it is open.
-  useEffect(() => {
-    lockPageScroll();
-
-    return () => {
-      unlockPageScroll();
-    };
-  }, []);
+  usePageScrollLock(true);
 
   useEffect(() => {
     inputRef.current?.focus();

package/UI/Components/EditionLabel/EditionLabel.tsx

@@ -92,6 +92,10 @@ const parseLicenseInstances: ParseLicenseInstancesFunction = (
         typeof instance["userCount"] === "number"
           ? instance["userCount"]
           : null,
+      isCountedTowardsUsage:
+        typeof instance["isCountedTowardsUsage"] === "boolean"
+          ? instance["isCountedTowardsUsage"]
+          : undefined,
       lastReportedAt:
         typeof instance["lastReportedAt"] === "string"
           ? instance["lastReportedAt"]

package/UI/Components/Modal/Modal.tsx

@@ -8,7 +8,7 @@ import { VeryLightGray } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
 import { wasPressConsumedByAnAnchoredPopup } from "../../Types/LayeredDismissal";
-import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
+import { usePageScrollLock } from "../../Utils/PageScrollLock";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -125,13 +125,7 @@ const Modal: FunctionComponent<ComponentProps> = (
     };
   }, []);
 
-  useEffect(() => {
-    lockPageScroll();
-
-    return () => {
-      unlockPageScroll();
-    };
-  }, []);
+  usePageScrollLock(true);
 
   useEffect(() => {
     const content: HTMLDivElement | null = contentRef.current;

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -201,6 +201,13 @@ export enum ModalTableBulkDefaultActions {
 export interface BulkActionProps<T extends BaseModel | AnalyticsBaseModel> {
   buttons: Array<BulkActionButtonSchema<T> | ModalTableBulkDefaultActions>;
   matchBulkSelectedItemByField?: keyof T | undefined; // which field to use to match selected items. For exmaple this could be '_id'
+  /**
+   * Appended to the bulk Delete confirmation, for a surface where deleting the
+   * selected rows also removes records the user did not select, or where a
+   * reversible alternative exists. The default sentence only says the deletion
+   * cannot be undone - it cannot know what else goes with it.
+   */
+  deleteConfirmationWarning?: string | undefined;
 }
 
 export interface BaseTableProps<
@@ -2923,7 +2930,12 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             items.length === 1
               ? props.singularName || model.singularName || "item"
               : props.pluralName || model.pluralName || "items";
-          return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.`;
+
+          const warning: string = props.bulkActions?.deleteConfirmationWarning
+            ? ` ${props.bulkActions.deleteConfirmationWarning}`
+            : "";
+
+          return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.${warning}`;
         },
         confirmTitle: (items: Array<TBaseModel>) => {
           const itemLabel: string =
@@ -2946,26 +2958,41 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           const failedItems: Array<BulkActionFailed<TBaseModel>> = [];
 
           for (let i: number = 0; i < items.length; i++) {
-            try {
-              const item: TBaseModel = items[i]!;
-              // remove items from inProgressItems
-              inProgressItems.splice(inProgressItems.indexOf(item), 1);
+            const item: TBaseModel = items[i]!;
+
+            // remove items from inProgressItems
+            inProgressItems.splice(inProgressItems.indexOf(item), 1);
 
+            try {
               await props.callbacks.deleteItem(item);
               successItems.push(item);
-
-              onProgressInfo({
-                inProgressItems: inProgressItems,
-                successItems: successItems,
-                failed: failedItems,
-                totalItems: items,
-              });
             } catch (err) {
               failedItems.push({
-                item: items[i]!,
+                item: item,
                 failedMessage: API.getFriendlyMessage(err),
               });
             }
+
+            /*
+             * Reported after a failure as well as after a success. This used to
+             * sit inside the `try`, so a row that failed moved neither the
+             * progress bar nor the failure list until some later row succeeded
+             * - and a run whose trailing rows all failed (or one where every
+             * row failed, which is what a permission or constraint problem
+             * looks like) ended with the modal still showing the counts from
+             * before them. Deleting hundreds of rows at once is exactly where
+             * partial failure is expected, so it has to be visible.
+             *
+             * Copies, not the live arrays: the progress info goes into React
+             * state, and pushing into the same array reference leaves the
+             * previous render's snapshot mutated underneath it.
+             */
+            onProgressInfo({
+              inProgressItems: [...inProgressItems],
+              successItems: [...successItems],
+              failed: [...failedItems],
+              totalItems: items,
+            });
           }
 
           onBulkActionEnd();
@@ -3116,9 +3143,17 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             },
           );
 
+          /*
+           * On a table that already offers bulk actions the gate decides on
+           * its own, because there is no selection column left to grow: the
+           * row checkboxes are already there. That covers the locked case, and
+           * it also covers a master admin - allowed everything by the gate, but
+           * holding no project permission for `userCanDelete` to find, so the
+           * Delete they are entitled to used to be missing from a menu whose
+           * every other action worked (issue #3559).
+           */
           const canAutoInjectDelete: boolean =
-            userCanDelete ||
-            (bulkDeleteGate.disabled && sourceButtons.length > 0);
+            userCanDelete || (bulkDeleteGate.show && sourceButtons.length > 0);
 
           if (canAutoInjectDelete && !alreadyHasDeleteAction) {
             sourceButtons.push(ModalTableBulkDefaultActions.Delete);

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -538,6 +538,50 @@ export default class TemplateVariablesCatalog {
           ],
         };
 
+      case MonitorType.Database:
+        return {
+          title: "Database Health",
+          variables: [
+            {
+              key: "isOnline",
+              description: "True if the database accepted the connection.",
+            },
+            {
+              key: "responseTimeInMs",
+              description: "Time to connect and run the baseline query.",
+            },
+            { key: "failureCause", description: "Failure reason." },
+            {
+              key: "connectionError",
+              description:
+                "Connection error, when the database was unreachable.",
+            },
+            {
+              key: "engineVersion",
+              description: "Version string the database server reported.",
+            },
+            {
+              key: "collectedGroups",
+              description: "Metric groups that produced values on this check.",
+            },
+            {
+              key: "unavailableGroups",
+              description:
+                "Array of {group, reason, message, remediation} for groups that produced nothing.",
+            },
+            {
+              key: "collectionIssueSummary",
+              description:
+                "One-line summary of the unavailable groups - empty when everything was collected.",
+            },
+            {
+              key: "metrics",
+              description:
+                "Collected values keyed by metric name. A metric that was not collected is absent.",
+            },
+          ],
+        };
+
       case MonitorType.ExternalStatusPage:
         return {
           title: "External Status Page",

package/UI/Components/Navbar/NavBar.tsx

@@ -66,11 +66,11 @@ export interface ComponentProps {
     link: URL;
   };
   /*
-   * When true, the document-level Cmd/Ctrl+K shortcut that toggles the
-   * products menu is not registered — for apps where another surface (e.g. a
-   * command palette) owns that shortcut. The menu itself stays fully usable
-   * via its trigger button. Defaults to false: existing consumers keep the
-   * shortcut.
+   * When true, Cmd/Ctrl+K never opens or toggles the products menu — for apps
+   * where another surface (e.g. a command palette) owns that shortcut. The
+   * menu itself stays usable via its trigger button; if it is already open,
+   * the owner's chord dismisses it without consuming the event. Defaults to
+   * false so existing consumers keep the products shortcut.
    */
   disableCommandKShortcut?: boolean | undefined;
   className?: string;
@@ -85,6 +85,22 @@ export interface ComponentProps {
 const MOBILE_MENU_BOTTOM_GAP_IN_PX: number = 16;
 const MOBILE_MENU_MIN_HEIGHT_IN_PX: number = 160;
 
+/*
+ * Keep the products-menu shortcut and the dashboard command palette on the
+ * same definition of Cmd/Ctrl+K. In particular, modified chords such as
+ * Cmd+Shift+K must be left alone for the browser or another feature.
+ */
+const isCommandKShortcut: (event: KeyboardEvent) => boolean = (
+  event: KeyboardEvent,
+): boolean => {
+  return (
+    (event.metaKey || event.ctrlKey) &&
+    !event.shiftKey &&
+    !event.altKey &&
+    event.key.toLowerCase() === "k"
+  );
+};
+
 const Navbar: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -96,6 +112,9 @@ const Navbar: FunctionComponent<ComponentProps> = (
   const [mobileMenuMaxHeight, setMobileMenuMaxHeight] = useState<
     number | undefined
   >(undefined);
+  const hasMoreMenu: boolean = Boolean(
+    !props.children && props.moreMenuItems && props.moreMenuItems.length > 0,
+  );
 
   // Use the existing outside click hook for mobile menu
   const {
@@ -173,27 +192,56 @@ const Navbar: FunctionComponent<ComponentProps> = (
 
   // Open/close the products menu with Cmd/Ctrl + K from anywhere.
   useEffect(() => {
-    if (props.disableCommandKShortcut) {
-      // Another surface (e.g. a command palette) owns Cmd/Ctrl+K.
+    if (props.disableCommandKShortcut || !hasMoreMenu) {
+      // Another surface owns Cmd/Ctrl+K, or there is no products menu to open.
       return;
     }
 
     const handleGlobalKeyDown: (event: KeyboardEvent) => void = (
       event: KeyboardEvent,
     ): void => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-        event.preventDefault();
-        setIsMoreMenuVisible((visible: boolean) => {
-          return !visible;
-        });
+      if (!isCommandKShortcut(event) || event.defaultPrevented) {
+        return;
       }
+
+      event.preventDefault();
+      setIsMoreMenuVisible((visible: boolean) => {
+        return !visible;
+      });
     };
 
     document.addEventListener("keydown", handleGlobalKeyDown);
     return () => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
     };
-  }, [props.disableCommandKShortcut]);
+  }, [hasMoreMenu, props.disableCommandKShortcut]);
+
+  /*
+   * When the dashboard has surrendered Cmd/Ctrl+K to its command palette, an
+   * already-open products modal must get out of the way before the palette
+   * opens. This close-only listener deliberately does not prevent or stop the
+   * event: the real shortcut owner still needs to receive the same keydown.
+   * It also ignores defaultPrevented so the result is deterministic regardless
+   * of which document listener React registered first.
+   */
+  useEffect(() => {
+    if (!props.disableCommandKShortcut || !hasMoreMenu || !isMoreMenuVisible) {
+      return;
+    }
+
+    const closeProductsOnCommandK: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      if (isCommandKShortcut(event)) {
+        setIsMoreMenuVisible(false);
+      }
+    };
+
+    document.addEventListener("keydown", closeProductsOnCommandK);
+    return () => {
+      document.removeEventListener("keydown", closeProductsOnCommandK);
+    };
+  }, [hasMoreMenu, isMoreMenuVisible, props.disableCommandKShortcut]);
 
   // More menu open/close.
   const openMoreMenu: () => void = (): void => {
@@ -488,6 +536,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
             footer={props.moreMenuFooter}
             searchPlaceholder={props.moreMenuSearchPlaceholder}
             noResultsText={props.moreMenuNoResultsText}
+            showCommandKShortcutHint={!props.disableCommandKShortcut}
             keyboardHint={props.moreMenuKeyboardHint}
             recentLabel={props.moreMenuRecentLabel}
             onClose={closeMoreMenu}

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -129,6 +129,11 @@ export interface ComponentProps {
     | undefined;
   searchPlaceholder?: string | undefined;
   noResultsText?: string | undefined;
+  /*
+   * Defaults to visible for direct/legacy consumers. Dashboard hides it when
+   * its command palette owns Cmd/Ctrl+K instead of this products menu.
+   */
+  showCommandKShortcutHint?: boolean | undefined;
   keyboardHint?: string | undefined;
   recentLabel?: string | undefined;
   onClose: () => void;
@@ -502,14 +507,14 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 >
                   <Icon icon={IconProp.Close} className="h-4 w-4" />
                 </button>
-              ) : (
+              ) : props.showCommandKShortcutHint !== false ? (
                 /* OS-appropriate hint: ⌘ K on a Mac, Ctrl K elsewhere. */
                 <KeyboardShortcut
                   keys={[KeyboardKey.Mod, "K"]}
                   size={KeyboardShortcutSize.Small}
                   className="hidden sm:inline-flex"
                 />
-              )}
+              ) : null}
             </div>
 
             {/* Body */}

package/UI/Components/ProgressBar/ProgressBar.tsx

@@ -28,7 +28,18 @@ const ProgressBar: FunctionComponent<ComponentProps> = (
     let percent: number = 0;
 
     try {
-      percent = (props.count * 100) / props.totalCount;
+      /*
+       * Dividing by zero does not throw in JavaScript — it yields NaN, which
+       * the catch below never sees. `Math.ceil(NaN)` is NaN, and NaN then
+       * reaches the DOM three times over: as `width: NaN%` (which the browser
+       * silently discards, leaving an empty track), as aria-valuenow, and as
+       * the visible "NaN%" readout beside the count. Every caller that had
+       * noticed guarded its own render on a non-zero total; the ones that had
+       * not simply showed it.
+       */
+      if (props.totalCount > 0) {
+        percent = (props.count * 100) / props.totalCount;
+      }
     } catch (err) {
       Logger.error(err as Error);
       // do nothing.

package/UI/Components/RadioButtons/BasicRadioButtons.tsx

@@ -55,23 +55,53 @@ const BasicRadioButton: FunctionComponent<ComponentProps> = (
 
               return (
                 <div key={i}>
-                  <div className="flex items-center">
+                  {/*
+                   * items-start, and the description on its own line.
+                   *
+                   * Both spans used to sit inline inside one label, separated
+                   * by `ml-1 sm:ml-0` — which cancels the only gap between
+                   * them at every breakpoint from `sm` up, i.e. on every
+                   * desktop. The result rendered as "Create an alertNotifies
+                   * the team and runs the on-call policy." Stacking them also
+                   * lets a long description wrap under the title instead of
+                   * under the radio.
+                   */}
+                  <div className="flex items-start">
+                    {/*
+                     * htmlFor, and an id to point it at.
+                     *
+                     * The label was a bare sibling of the input, so nothing
+                     * tied them together: the radio had no accessible name at
+                     * all (a screen reader announced "radio button, not
+                     * checked" and never read "Create an alert"), and the only
+                     * hit target was the 16px dot — clicking the words did
+                     * nothing. GroupRadioButtons next door gets this right by
+                     * wrapping the input; this shape needs the explicit link.
+                     */}
                     <input
+                      id={`${id}-${i}`}
                       type="radio"
                       name={id}
                       checked={checked}
                       onChange={() => {
                         handleChange(radioButton.value);
                       }}
-                      className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                      className="mt-1 h-4 w-4 flex-shrink-0 border-gray-300 text-indigo-600 focus:ring-indigo-600"
                     />
-                    <label className="ml-3 block text-sm font-medium leading-6 text-gray-900">
-                      <span className="font-medium text-gray-900">
+                    <label
+                      htmlFor={`${id}-${i}`}
+                      className="ml-3 block cursor-pointer text-sm leading-6 text-gray-900"
+                    >
+                      <span className="block font-medium text-gray-900">
                         {radioButton.title}
                       </span>
-                      <span className="ml-1 text-gray-500 sm:ml-0">
-                        {radioButton.description}
-                      </span>
+                      {radioButton.description ? (
+                        <span className="mt-0.5 block text-sm leading-5 text-gray-500">
+                          {radioButton.description}
+                        </span>
+                      ) : (
+                        <></>
+                      )}
                     </label>
                   </div>
                   {checked && radioButton.children}