@oneuptime/common 14.0.2 → 14.0.5

package/UI/Components/Card/Card.tsx

@@ -105,7 +105,7 @@ const Card: FunctionComponent<ComponentProps> = (
       {translatedDescription && (
         <p
           data-testid="card-description"
-          className="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed"
+          className="mt-1.5 text-sm text-gray-500 w-full max-md:hidden md:block leading-relaxed"
         >
           {translatedDescription}
         </p>

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -351,7 +351,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                       {getDragToZoomHint(chart)}
                     </div>
                     {chart.description && (
-                      <p className="mt-1 text-xs text-gray-500 hidden md:block">
+                      <p className="mt-1 text-xs text-gray-500 max-md:hidden md:block">
                         {chart.description}
                       </p>
                     )}
@@ -413,7 +413,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                 {chart.description && (
                   <p
                     data-testid="card-description"
-                    className="mt-0.5 w-full truncate text-xs text-gray-500 hidden md:block"
+                    className="mt-0.5 w-full truncate text-xs text-gray-500 max-md:hidden md:block"
                     title={chart.description}
                   >
                     {chart.description}

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

@@ -88,6 +88,12 @@ export interface ComponentProps {
    * position (index % length).
    */
   colors?: Array<ChartColorValue> | undefined;
+  /*
+   * false keeps the y-axis ticks on whole numbers, for a series that counts
+   * things (connections, nodes): otherwise 0-2 ticks as 0 | 0.5 | 1 | 1.5.
+   * Unset, the axis picks decimal ticks as it always has.
+   */
+  allowDecimals?: boolean | undefined;
 }
 
 export interface LineInternalProps extends ComponentProps {
@@ -221,6 +227,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         autoMinValue={autoMinValue}
         {...minValueProp}
         {...maxValueProp}
+        allowDecimals={props.allowDecimals !== false}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
         formattedTimeReferenceLines={

package/UI/Components/CommandPalette/CommandPalette.tsx

@@ -616,7 +616,7 @@ const CommandPalettePanel: FunctionComponent<PanelProps> = (
               <KeyboardShortcut
                 keys={[KeyboardKey.Mod, "K"]}
                 size={KeyboardShortcutSize.Small}
-                className="hidden flex-shrink-0 sm:inline-flex"
+                className="max-sm:hidden flex-shrink-0 sm:inline-flex"
               />
             </div>
 

package/UI/Components/Date/StartAndEndDate.tsx

@@ -252,7 +252,7 @@ const StartAndEndDate: DateFilterFunction = (
                   );
                 }}
                 title="3 hours"
-                className="hidden md:block"
+                className="max-md:hidden md:block"
               />
             )}
 
@@ -314,7 +314,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="2 weeks"
-              className="hidden md:block"
+              className="max-md:hidden md:block"
             />
 
             <Button
@@ -335,7 +335,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="3 weeks"
-              className="hidden md:block"
+              className="max-md:hidden md:block"
             />
 
             <Button
@@ -356,7 +356,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="1 month"
-              className="hidden md:block"
+              className="max-md:hidden md:block"
             />
 
             <Button
@@ -377,7 +377,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="3 months"
-              className="hidden md:block"
+              className="max-md:hidden md:block"
             />
           </div>
         )}

package/UI/Components/Detail/FieldLabel.tsx

@@ -1,6 +1,7 @@
 import Link from "../Link/Link";
 import { DetailSideLink } from "./Field";
 import useTranslateValue from "../../Utils/Translation";
+import InfoTooltip from "../Tooltip/InfoTooltip";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export enum Size {
@@ -16,6 +17,8 @@ export interface ComponentProps {
   sideLink?: DetailSideLink | undefined;
   size?: Size | undefined;
   isCardStyle?: boolean | undefined;
+  // What the field means, shown in an (i) tooltip beside the title.
+  tooltip?: string | undefined;
 }
 
 const FieldLabelElement: FunctionComponent<ComponentProps> = (
@@ -40,6 +43,11 @@ const FieldLabelElement: FunctionComponent<ComponentProps> = (
         >
           <span className={`${props.alignClassName} flex items-center gap-1.5`}>
             {translatedTitle}
+            <InfoTooltip
+              label={translatedTitle}
+              text={props.tooltip}
+              className="relative z-10 normal-case tracking-normal"
+            />
             <span className="w-1 h-1 rounded-full bg-gray-300"></span>
           </span>
           {props.sideLink && translatedSideLinkText && props.sideLink?.url && (

package/UI/Components/Diagram/HorizontalStepChain.tsx

@@ -58,7 +58,7 @@ const HorizontalStepChain: FunctionComponent<ComponentProps> = (
             {/* Arrow */}
             <Icon
               icon={IconProp.ChevronRight}
-              className="h-4 w-4 text-gray-300 hidden sm:block"
+              className="h-4 w-4 text-gray-300 max-sm:hidden sm:block"
             />
           </React.Fragment>
         );

package/UI/Components/Feed/FeedOptionsButton.tsx

@@ -448,7 +448,7 @@ const FeedOptionsButton: FunctionComponent<ComponentProps> = (
           className={`h-4 w-4 ${isCustomized ? "text-indigo-500" : "text-gray-500"}`}
         />
         <span
-          className="sr-only xl:not-sr-only"
+          className="max-xl:sr-only xl:not-sr-only"
           data-testid="feed-options-label"
         >
           {translate(FEED_OPTIONS_TEXT.triggerLabel)}

package/UI/Components/Forms/BasicForm.tsx

@@ -673,7 +673,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
               {formSteps && currentFormStepId && (
                 <div
                   style={{ flex: "0 1 auto" }}
-                  className="mr-10 hidden lg:block"
+                  className="mr-10 max-lg:hidden lg:block"
                 >
                   {/* Form Steps */}
 

package/UI/Components/Header/Header.tsx

@@ -5,7 +5,7 @@ export interface ComponentProps {
   /*
    * The right-hand rail. Rendered at every viewport width — see the note on the
    * container below. An entry that only earns its space on a wide screen
-   * carries its own breakpoint classes (`hidden lg:flex`) at the call site.
+   * carries its own breakpoint classes (`max-lg:hidden lg:flex`) at the call site.
    */
   rightComponents?: undefined | Array<ReactElement> | ReactElement;
   centerComponents?: undefined | Array<ReactElement> | ReactElement;

package/UI/Components/Header/HeaderIconDropdownButton.tsx

@@ -128,7 +128,7 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
               keys={props.shortcut!}
               size={KeyboardShortcutSize.ExtraSmall}
               variant={KeyboardShortcutVariant.Ghost}
-              className="ml-0.5 hidden sm:inline-flex"
+              className="ml-0.5 max-sm:hidden sm:inline-flex"
             />
           )}
         </button>

package/UI/Components/HeaderAlert/HeaderAlert.tsx

@@ -88,7 +88,7 @@ const HeaderAlert: (props: ComponentProps) => ReactElement = (
             </span>
             {props.suffix && (
               <span
-                className={`${textColor} text-sm font-medium opacity-80 hidden md:block`}
+                className={`${textColor} text-sm font-medium opacity-80 max-md:hidden md:block`}
               >
                 {props.suffix}
               </span>

package/UI/Components/InfoCard/InfoCard.tsx

@@ -20,6 +20,8 @@ export interface ComponentProps {
   isSelected?: boolean | undefined;
   // Announced in place of the title when the card is clickable.
   ariaLabel?: string | undefined;
+  // What the value means, shown in an (i) tooltip beside the title.
+  tooltip?: string | undefined;
 }
 
 const InfoCard: FunctionComponent<ComponentProps> = (
@@ -37,6 +39,50 @@ const InfoCard: FunctionComponent<ComponentProps> = (
       ? "border-indigo-500 ring-1 ring-indigo-500"
       : "border-gray-200";
 
+  /*
+   * A clickable card with a tooltip cannot stay a role="button" div: the (i)
+   * is a button of its own, and a button's children are presentational, so
+   * screen readers would never reach it. The card becomes a plain container
+   * with a real button laid over it, and the (i) sits above that button
+   * (FieldLabel lifts it with relative z-10). Cards without a tooltip keep
+   * the markup below, unchanged.
+   */
+  if (isClickable && props.tooltip?.trim()) {
+    return (
+      <div
+        className={`relative rounded-xl bg-white border ${borderClassName} shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${props.className || ""}`}
+      >
+        <button
+          type="button"
+          onClick={props.onClick}
+          aria-pressed={
+            props.isSelected !== undefined
+              ? Boolean(props.isSelected)
+              : undefined
+          }
+          /*
+           * Named like the old role="button" card, which read its title and
+           * value - unless the value is an element, which has no text to
+           * borrow here.
+           */
+          aria-label={
+            props.ariaLabel ||
+            (typeof props.value === "string"
+              ? `${props.title} ${props.value}`
+              : props.title)
+          }
+          className="absolute inset-0 rounded-xl cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+        />
+        <div className="mb-2">
+          <FieldLabelElement title={props.title} tooltip={props.tooltip} />
+        </div>
+        <div className={props.textClassName || "text-gray-900"}>
+          {props.value}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       onClick={props.onClick}
@@ -75,7 +121,7 @@ const InfoCard: FunctionComponent<ComponentProps> = (
       className={`rounded-xl bg-white border ${borderClassName} shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${isClickable ? "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2" : ""} ${props.className || ""}`}
     >
       <div className="mb-2">
-        <FieldLabelElement title={props.title} />
+        <FieldLabelElement title={props.title} tooltip={props.tooltip} />
       </div>
       <div className={props.textClassName || "text-gray-900"}>
         {props.value}

package/UI/Components/LogsViewer/components/FacetValueRow.tsx

@@ -100,7 +100,7 @@ const FacetValueRow: FunctionComponent<FacetValueRowProps> = (
 
       <button
         type="button"
-        className="hidden h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-hover:flex"
+        className="flex h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-[:not(:hover)]:hidden"
         onClick={(e: React.MouseEvent) => {
           e.stopPropagation();
           props.onExclude(props.value);

package/UI/Components/LogsViewer/components/LogsFacetSidebar.tsx

@@ -361,7 +361,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
     <div
       id={props.id}
       className={`${
-        props.isCollapsedOnSmallScreens ? "hidden md:flex" : "flex"
+        props.isCollapsedOnSmallScreens ? "max-md:hidden md:flex" : "flex"
       } max-h-80 w-full flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white md:h-full md:max-h-none md:w-56`}
     >
       <div className="border-b border-gray-100 px-3 py-2.5">

package/UI/Components/Modal/ModalFooter.tsx

@@ -37,7 +37,7 @@ const ModalFooter: FunctionComponent<ComponentProps> = (
           {props.leftFooterElement}
         </div>
       ) : (
-        <div className="hidden sm:block" />
+        <div className="max-sm:hidden sm:block" />
       )}
       <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
         {props.onClose ? (

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -97,7 +97,7 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
         title: "View Documentation",
         icon: IconProp.Book,
         buttonStyle: ButtonStyleType.OUTLINE,
-        className: "hidden md:flex",
+        className: "max-md:hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.documentationLink!, {
             openInNewTab: true,
@@ -112,7 +112,7 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
         title: "Watch Demo",
         icon: IconProp.Play,
         buttonStyle: ButtonStyleType.OUTLINE,
-        className: "hidden md:flex",
+        className: "max-md:hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.videoLink!, {
             openInNewTab: true,

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -208,6 +208,19 @@ export interface BulkActionProps<T extends BaseModel | AnalyticsBaseModel> {
    * cannot be undone - it cannot know what else goes with it.
    */
   deleteConfirmationWarning?: string | undefined;
+  /**
+   * The word the default bulk Delete uses instead of "Delete", for a table
+   * whose rows are relationships rather than things - "Unlink" on a table of
+   * links, say. When set, the menu item, the confirmation's title and its
+   * sentence all use it ("Unlink 3 Alerts", "Are you sure you want to unlink
+   * 3 alerts?"), and the sentence no longer claims the action cannot be
+   * undone: removing a relationship is undone by adding it again. It is still
+   * the table's delete action - it deletes the selected rows, is gated on the
+   * model's delete permission, and stops a second Delete being added.
+   */
+  deleteVerb?: string | undefined;
+  /* The menu icon to go with deleteVerb. Defaults to the trash can. */
+  deleteIcon?: IconProp | undefined;
 }
 
 /**
@@ -562,6 +575,29 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
   const model: TBaseModel = new props.modelType();
 
+  /*
+   * The header's create button, "<verb> <noun>". Translating the two words
+   * separately reads the verb out of context - "Link" comes back as the noun
+   * in many languages, and word order differs - so the whole phrase is looked
+   * up first ("Link Alert") and the word-by-word join is only the fallback
+   * for a phrase with no entry of its own. In English both are the same.
+   */
+  const getCreateButtonTitle: () => string = (): string => {
+    const verb: string = props.createVerb || "Create";
+    const noun: string = props.singularName || model.singularName || "";
+
+    if (noun) {
+      const phrase: string = `${verb} ${noun}`;
+      const translatedPhrase: string = tx(phrase);
+
+      if (translatedPhrase && translatedPhrase !== phrase) {
+        return translatedPhrase;
+      }
+    }
+
+    return `${tx(verb)} ${tx(noun)}`;
+  };
+
   /*
    * How a create / update / delete affordance should be rendered for this
    * viewer. A user without the permission used to simply not see the button,
@@ -586,8 +622,18 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   const getActionGate: GetActionGateFunction = (
     action: ModelAction,
   ): ActionGate => {
+    /*
+     * A table that calls its delete "Unlink" must not say the locked button
+     * would delete the row's noun ("permission to delete this Alert"). Keyed
+     * on deleteVerb alone: deleteButtonText is also set by tables such as
+     * "Remove from Project", which keep the default "delete" sentence.
+     */
     const result: PermissionGateResult = PermissionGate.check(model, action, {
       singularName: props.singularName || model.singularName || undefined,
+      verb:
+        action === ModelAction.Delete
+          ? props.bulkActions?.deleteVerb?.trim() || undefined
+          : undefined,
     });
 
     if (result.isAllowed) {
@@ -2387,7 +2433,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         icon: IconProp.Book,
         buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
         buttonSize: ButtonSize.Small,
-        className: "hidden md:flex",
+        className: "max-md:hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.documentationLink!, {
             openInNewTab: true,
@@ -2417,7 +2463,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         icon: IconProp.Play,
         buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
         buttonSize: ButtonSize.Small,
-        className: "hidden md:flex",
+        className: "max-md:hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.videoLink!, {
             openInNewTab: true,
@@ -2446,9 +2492,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       showAs !== ShowAs.OrderedStatesList
     ) {
       headerbuttons.push({
-        title: `${tx(props.createVerb || "Create")} ${tx(
-          props.singularName || model.singularName || "",
-        )}`,
+        title: getCreateButtonTitle(),
         buttonStyle: ButtonStyleType.NORMAL,
         buttonSize: ButtonSize.Normal,
         className: "",
@@ -2908,10 +2952,16 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
       const deleteGate: ActionGate = getActionGate(ModelAction.Delete);
 
+      /* The row action wears the same icon as the bulk one it stands for. */
+      const rowDeleteIcon: IconProp =
+        (props.bulkActions?.deleteVerb?.trim() &&
+          props.bulkActions?.deleteIcon) ||
+        IconProp.Trash;
+
       if (props.isDeleteable && deleteGate.show) {
         actionsSchema.push({
           title: tx(props.deleteButtonText || "Delete"),
-          icon: IconProp.Trash,
+          icon: rowDeleteIcon,
           buttonStyleType: ButtonStyleType.DANGER_OUTLINE,
           disabled: deleteGate.disabled,
           tooltip: deleteGate.tooltip,
@@ -3008,28 +3058,43 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
   const getDeleteBulkAction: GetDeleteBulkActionFunction =
     (): BulkActionButtonSchema<TBaseModel> => {
+      /*
+       * A table that names its own verb ("Unlink") removes relationships, not
+       * things, so its sentence drops "This action cannot be undone" - that
+       * would say the opposite of the warning it usually appends.
+       */
+      const deleteVerb: string | undefined =
+        props.bulkActions?.deleteVerb?.trim() || undefined;
+
+      type GetItemLabelFunction = (items: Array<TBaseModel>) => string;
+
+      const getItemLabel: GetItemLabelFunction = (
+        items: Array<TBaseModel>,
+      ): string => {
+        return items.length === 1
+          ? props.singularName || model.singularName || "item"
+          : props.pluralName || model.pluralName || "items";
+      };
+
       return {
-        title: "Delete",
+        title: deleteVerb || "Delete",
         buttonStyleType: ButtonStyleType.DANGER,
-        icon: IconProp.Trash,
+        icon: (deleteVerb && props.bulkActions?.deleteIcon) || IconProp.Trash,
         confirmMessage: (items: Array<TBaseModel>) => {
-          const itemLabel: string =
-            items.length === 1
-              ? props.singularName || model.singularName || "item"
-              : props.pluralName || model.pluralName || "items";
+          const itemLabel: string = getItemLabel(items);
 
           const warning: string = props.bulkActions?.deleteConfirmationWarning
             ? ` ${props.bulkActions.deleteConfirmationWarning}`
             : "";
 
+          if (deleteVerb) {
+            return `Are you sure you want to ${deleteVerb.toLowerCase()} ${items.length} ${itemLabel.toLowerCase()}?${warning}`;
+          }
+
           return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.${warning}`;
         },
         confirmTitle: (items: Array<TBaseModel>) => {
-          const itemLabel: string =
-            items.length === 1
-              ? props.singularName || model.singularName || "item"
-              : props.pluralName || model.pluralName || "items";
-          return `Delete ${items.length} ${itemLabel}`;
+          return `${deleteVerb || "Delete"} ${items.length} ${getItemLabel(items)}`;
         },
         confirmButtonStyleType: ButtonStyleType.DANGER,
         onClick: async ({
@@ -3207,7 +3272,19 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
            * Table derives the row checkboxes from this array being non-empty,
            * so injecting a locked Delete into an otherwise empty array would
            * grow a selection column onto tables that have never had one.
+           *
+           * A page's own button counts as the delete action when it carries
+           * the title the default one would have: "Delete", or the table's
+           * deleteVerb.
            */
+          const deleteActionTitles: Array<string> = ["Delete"];
+          const bulkDeleteVerb: string | undefined =
+            props.bulkActions?.deleteVerb?.trim() || undefined;
+
+          if (bulkDeleteVerb) {
+            deleteActionTitles.push(bulkDeleteVerb);
+          }
+
           const alreadyHasDeleteAction: boolean = sourceButtons.some(
             (
               action:
@@ -3221,8 +3298,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                 typeof action === "object" &&
                 action !== null &&
                 "title" in action &&
-                (action as BulkActionButtonSchema<TBaseModel>).title ===
-                  "Delete"
+                deleteActionTitles.includes(
+                  (action as BulkActionButtonSchema<TBaseModel>).title,
+                )
               ) {
                 return true;
               }
@@ -3989,7 +4067,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
               </button>
             ) : (
               <kbd
-                className="hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex"
+                className="max-sm:hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex"
                 title="Press / to focus search"
               >
                 /
@@ -4338,7 +4416,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             <span className="flex-1 truncate text-left text-gray-400">
               Search…
             </span>
-            <kbd className="hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex">
+            <kbd className="max-sm:hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex">
               /
             </kbd>
           </button>

package/UI/Components/ModelTable/Column.ts

@@ -63,6 +63,11 @@ export default interface Columns<
   colSpan?: number | undefined;
   disableSort?: boolean;
   description?: string | undefined;
+  /*
+   * What the column's values mean, in an (i) beside the header (see the
+   * Table Column of the same name). Spread through to the table as is.
+   */
+  headerTooltip?: string | undefined;
   type: FieldType;
   tooltipText?: ((item: TEntity) => string) | undefined;
   actionButtons?: Array<ActionButton>;

package/UI/Components/Navbar/NavBar.tsx

@@ -392,10 +392,17 @@ const Navbar: FunctionComponent<ComponentProps> = (
     );
   }
 
-  // Desktop view
+  /*
+   * Desktop view. `max-md:hidden md:flex`, never `hidden md:flex`: the bare
+   * `hidden` class is the one name a browser extension, a user stylesheet or
+   * an injected Bootstrap 3 / HTML5 Boilerplate sheet declares as
+   * `.hidden { display: none !important }`, and that rule beats `md:flex` at
+   * every width. A customer lost the whole navigation bar — and with it every
+   * product — to exactly that. The max-width form never carries the class.
+   */
   const className: string =
     props.className ||
-    "bg-white flex text-center items-center lg:py-2 hidden md:flex";
+    "bg-white flex text-center items-center lg:py-2 max-md:hidden md:flex";
 
   // Find active item in more menu items (needed for breadcrumb)
   const activeMoreItem: MoreMenuItem | undefined = props.moreMenuItems?.find(

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -516,7 +516,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 <KeyboardShortcut
                   keys={[KeyboardKey.Mod, "K"]}
                   size={KeyboardShortcutSize.Small}
-                  className="hidden sm:inline-flex"
+                  className="max-sm:hidden sm:inline-flex"
                 />
               ) : null}
             </div>
@@ -661,7 +661,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 {props.keyboardHint && (
                   <div
                     aria-label={tx(props.keyboardHint)}
-                    className="hidden flex-shrink-0 items-center gap-2 text-xs text-gray-400 md:flex"
+                    className="max-md:hidden flex-shrink-0 items-center gap-2 text-xs text-gray-400 md:flex"
                   >
                     <KeyboardShortcut
                       keys={[KeyboardKey.ArrowUp, KeyboardKey.ArrowDown]}

package/UI/Components/Page/Page.tsx

@@ -113,7 +113,7 @@ const Page: FunctionComponent<ComponentProps> = (
                   </div>
                 )}
                 {props.labels && props.labels.length > 0 && (
-                  <div className="hidden sm:flex sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
+                  <div className="max-sm:hidden sm:flex sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
                     <span className="text-xs font-semibold uppercase tracking-wide text-gray-500 whitespace-nowrap">
                       {translateString("Labels") || "Labels"}
                     </span>

package/UI/Components/Pagination/Pagination.tsx

@@ -210,7 +210,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
     const isCurrentPage: boolean = pageNumber === currentPageNumber;
 
     return (
-      <li className="hidden sm:flex" key={`page-${pageNumber}`}>
+      <li className="max-sm:hidden sm:flex" key={`page-${pageNumber}`}>
         <button
           type="button"
           data-testid={`pagination-page-${pageNumber}`}
@@ -244,7 +244,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
 
   const getEllipsis: GetEllipsisFunction = (key: string): ReactElement => {
     return (
-      <li className="hidden sm:flex" key={key}>
+      <li className="max-sm:hidden sm:flex" key={key}>
         <button
           type="button"
           data-testid={`pagination-${key}`}
@@ -372,7 +372,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
             </li>
 
             {isHasMoreMode && (
-              <li className="hidden sm:flex">
+              <li className="max-sm:hidden sm:flex">
                 <span
                   data-testid="pagination-current-page-indicator-desktop"
                   aria-current="page"

package/UI/Components/ProgressButtons/ProgressButtonItem.tsx

@@ -85,7 +85,7 @@ const ProgressButtonItem: FunctionComponent<ComponentProps> = (
 
       {!props.isLastStep && (
         <div
-          className="absolute right-0 top-0 hidden h-full w-5 md:block"
+          className="absolute right-0 top-0 max-md:hidden h-full w-5 md:block"
           aria-hidden="true"
         >
           <svg

package/UI/Components/SideMenu/SideMenu.tsx

@@ -532,8 +532,11 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
        * ("Scheduled Maintenance", "Recommendations" beside a badge) were
        * ellipsised on every page that has them. 16px buys those back without
        * taking a visible bite out of the content column.
+       *
+       * `max-md:hidden`, not `hidden`, for the reason given on the NavBar's
+       * desktop view: a foreign `.hidden` rule must not remove the menu.
        */
-      className={`hidden md:block w-56 lg:w-64 flex-shrink-0 mb-10 ${props.className || ""}`}
+      className={`max-md:hidden md:block w-56 lg:w-64 flex-shrink-0 mb-10 ${props.className || ""}`}
       role="navigation"
       aria-label="Main navigation"
     >