@oneuptime/common 12.0.12 → 12.0.14

package/UI/Components/Footer/Footer.tsx

@@ -16,6 +16,18 @@ export interface ComponentProps {
   links: Array<FooterLink>;
   style?: React.CSSProperties | undefined;
   className?: string | undefined;
+  /*
+   * Classes for the inner row. The default adds its own horizontal padding,
+   * which double-indents the footer inside a layout that is already padded —
+   * the status page, for one. Override it to align the footer with the content
+   * above it.
+   */
+  innerClassName?: string | undefined;
+  /*
+   * Classes for the copyright block. The default hides it between md and lg,
+   * which is not something every layout wants.
+   */
+  copyrightClassName?: string | undefined;
 }
 
 const Footer: FunctionComponent<ComponentProps> = (
@@ -29,7 +41,12 @@ const Footer: FunctionComponent<ComponentProps> = (
         }
         style={props.style}
       >
-        <div className="mx-auto w-full py-6 px-6 md:flex md:items-center md:justify-between lg:px-8">
+        <div
+          className={
+            props.innerClassName ||
+            "mx-auto w-full py-6 px-6 md:flex md:items-center md:justify-between lg:px-8"
+          }
+        >
           {/* Mobile: Stack links vertically, Desktop: Horizontal layout */}
           <div className="flex flex-col space-y-3 md:flex-row md:justify-center md:items-center md:space-y-0 md:space-x-8 md:order-2">
             {props.links &&
@@ -63,14 +80,23 @@ const Footer: FunctionComponent<ComponentProps> = (
                 );
               })}
           </div>
-          {/* Copyright: Show on mobile, hide on larger screens unless specified */}
-          <div className="mt-5 md:order-1 md:mt-0 block md:hidden lg:block">
-            {props.copyright && (
+          {/*
+           * Guard the wrapper, not just the <p>: with no copyright configured
+           * the empty div still contributed its mt-5, leaving a dead gap under
+           * the links.
+           */}
+          {props.copyright && (
+            <div
+              className={
+                props.copyrightClassName ||
+                "mt-5 md:order-1 md:mt-0 block md:hidden lg:block"
+              }
+            >
               <p className="text-center text-sm text-gray-500">
                 &copy; {props.copyright}
               </p>
-            )}
-          </div>
+            </div>
+          )}
         </div>
       </footer>
     </React.Fragment>

package/UI/Components/Forms/Fields/FormField.tsx

@@ -521,6 +521,9 @@ const FormField: <T extends GenericObject>(
               tabIndex={0}
               dataTestId={props.field.dataTestId}
               singleColumn={props.field.cardSelectSingleColumn}
+              searchable={props.field.cardSelectSearchable}
+              searchPlaceholder={props.field.cardSelectSearchPlaceholder}
+              collapsibleGroups={props.field.cardSelectCollapsibleGroups}
               onChange={(value: string) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);

package/UI/Components/Forms/Types/Field.ts

@@ -58,6 +58,14 @@ export default interface Field<TEntity> {
     | Array<CardSelectOption | CardSelectOptionGroup>
     | undefined;
   cardSelectSingleColumn?: boolean | undefined;
+  /*
+   * Give the card picker a search box and collapse its groups behind their
+   * headers. Both are opt in: a picker with a handful of cards reads fine as
+   * a plain grid, and turning them on there would only add chrome.
+   */
+  cardSelectSearchable?: boolean | undefined;
+  cardSelectSearchPlaceholder?: string | undefined;
+  cardSelectCollapsibleGroups?: boolean | undefined;
   fetchDropdownOptions?:
     | ((
         item: FormValues<TEntity>,

package/UI/Components/List/List.tsx

@@ -1,6 +1,5 @@
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Field from "../Detail/Field";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import FilterViewer from "../Filters/FilterViewer";
@@ -8,6 +7,7 @@ import FilterType from "../Filters/Types/Filter";
 import FilterData from "../Filters/Types/FilterData";
 import Pagination from "../Pagination/Pagination";
 import ListBody from "./ListBody";
+import ListSkeleton from "./ListSkeleton";
 import { ListDetailProps } from "./ListRow";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement } from "react";
@@ -67,12 +67,30 @@ type ListFunction = <T extends GenericObject>(
 const List: ListFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  /*
+   * A refetch with cards already on screen (pagination, sort, refresh - the
+   * parent never clears `data` while fetching) keeps those cards visible and
+   * dims them; skeletons are only for a load with nothing to show yet.
+   */
+  const isRefetchingWithData: boolean =
+    props.isLoading && props.data.length > 0;
+
   const getListbody: GetReactElementFunction = (): ReactElement => {
-    if (props.isLoading) {
-      return <ComponentLoader />;
+    if (props.isLoading && props.data.length === 0) {
+      return (
+        <ListSkeleton
+          fieldsCount={props.fields.length}
+          itemsOnPage={props.itemsOnPage}
+        />
+      );
     }
 
-    if (props.error) {
+    /*
+     * Loading still wins over error and empty (same priority as before the
+     * skeletons): while a refetch is in flight the stale cards render, never
+     * a stale error or a premature "no items".
+     */
+    if (!props.isLoading && props.error) {
       return (
         <div className="p-6">
           <ErrorMessage
@@ -145,7 +163,21 @@ const List: ListFunction = <T extends GenericObject>(
               }
             }}
           >
-            {getListbody()}
+            {/*
+             * Dims the stale cards while a refetch is in flight and blocks
+             * clicks on them - actions against data about to be replaced
+             * are a race.
+             */}
+            <div
+              data-testid="list-content"
+              className={
+                isRefetchingWithData
+                  ? "opacity-60 pointer-events-none transition-opacity duration-150"
+                  : "transition-opacity duration-150"
+              }
+            >
+              {getListbody()}
+            </div>
           </DragDropContext>
           {!props.disablePagination && (
             <div className="mt-5 -mb-6">

package/UI/Components/List/ListSkeleton.tsx

@@ -0,0 +1,54 @@
+import Skeleton from "../Skeleton/Skeleton";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  /*
+   * One placeholder line per field the real ListRow will render, so the
+   * cards are the right height before the data arrives.
+   */
+  fieldsCount: number;
+  itemsOnPage: number;
+}
+
+/*
+ * Card-shaped placeholders for the list's first load, matching ListBody's
+ * wrapper (space-y-6 p-6 border-t) so nothing shifts when real rows land.
+ */
+const ListSkeleton: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  // Enough cards to look like a page without painting offscreen ones.
+  const cardCount: number = Math.max(1, Math.min(props.itemsOnPage || 0, 6));
+  const cardIndexes: Array<number> = Array.from(Array(cardCount).keys());
+  const lineIndexes: Array<number> = Array.from(
+    Array(Math.max(1, props.fieldsCount)).keys(),
+  );
+
+  return (
+    <div
+      data-testid="list-skeleton-loader"
+      role="status"
+      aria-live="polite"
+      className="space-y-6 p-6 border-t border-gray-200"
+    >
+      <span className="sr-only">Loading...</span>
+      {cardIndexes.map((cardIndex: number) => {
+        return (
+          <div key={cardIndex} className="space-y-3">
+            {lineIndexes.map((lineIndex: number) => {
+              return (
+                <Skeleton
+                  key={lineIndex}
+                  className="h-4"
+                  widthVariantIndex={cardIndex + lineIndex}
+                />
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ListSkeleton;

package/UI/Components/Loader/PageLoader.tsx

@@ -1,22 +1,43 @@
 import Loader, { LoaderType } from "./Loader";
-import { VeryLightGray } from "../../../Types/BrandColors";
+import { Gray500 } from "../../../Types/BrandColors";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   isVisible: boolean;
+  /*
+   * Lets a full-page caller reserve height (e.g. "min-h-[60vh]") without
+   * changing the footprint of the many inline, in-card call sites that rely on
+   * the default spacing.
+   */
+  className?: string | undefined;
 }
 
 const PageLoader: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  if (props.isVisible) {
-    return (
-      <div className="m-auto w-full text-center w-max mt-52 align-middle flex items-center">
-        <Loader loaderType={LoaderType.Bar} color={VeryLightGray} size={200} />
-      </div>
-    );
+  if (!props.isVisible) {
+    return <></>;
   }
-  return <></>;
+
+  /*
+   * The bar used to be VeryLightGray (#c2c2c2) on white — about 1.7:1, which
+   * reads as a blank page rather than a loading one. Gray500 is visible without
+   * being loud.
+   *
+   * "w-full" and "w-max" were both set here, so which one applied came down to
+   * the order Tailwind happened to emit them in. The loader is centred by the
+   * flex row inside <Loader>, so full width is the one that was wanted.
+   */
+  return (
+    <div
+      className={
+        props.className ||
+        "m-auto mt-52 flex w-full items-center justify-center"
+      }
+    >
+      <Loader loaderType={LoaderType.Bar} color={Gray500} size={200} />
+    </div>
+  );
 };
 
 export default PageLoader;

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

@@ -26,6 +26,11 @@ import URL from "../../../../Types/API/URL";
 import HTTPResponse from "../../../../Types/API/HTTPResponse";
 import HTTPErrorResponse from "../../../../Types/API/HTTPErrorResponse";
 import { JSONObject } from "../../../../Types/JSON";
+import {
+  ResourceEntityFacetSelections,
+  collectResourceEntityFacetSelections,
+  collectServiceFacetSelections,
+} from "../../../../Types/Telemetry/ResourceEntityFacet";
 import { APP_API_URL } from "../../../Config";
 import ModelAPI from "../../../Utils/ModelAPI/ModelAPI";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
@@ -381,12 +386,29 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
             Array.from(severityValues);
         }
 
-        const serviceFilterValues: Set<string> | undefined =
-          props.appliedFacetFilters.get("primaryEntityId");
+        const serviceFilterValues: Array<string> =
+          collectServiceFacetSelections(props.appliedFacetFilters.entries());
 
-        if (serviceFilterValues && serviceFilterValues.size > 0) {
+        if (serviceFilterValues.length > 0) {
           (requestData as Record<string, unknown>)["serviceIds"] =
-            Array.from(serviceFilterValues);
+            serviceFilterValues;
+        }
+
+        /*
+         * Host / docker / podman / Kubernetes chips ride their own field —
+         * their ids are not `primaryEntityId` values for telemetry that
+         * carries a service.name, so the server resolves them to the
+         * resource's entity key. Without this the analytics tab silently
+         * ignored a cluster the sidebar was filtering by.
+         */
+        const resourceFilters: ResourceEntityFacetSelections =
+          collectResourceEntityFacetSelections(
+            props.appliedFacetFilters.entries(),
+          );
+
+        if (Object.keys(resourceFilters).length > 0) {
+          (requestData as Record<string, unknown>)["resourceFilters"] =
+            resourceFilters;
         }
 
         const traceFilterValues: Set<string> | undefined =

package/UI/Components/Markdown.tsx/LazyMarkdownViewer.tsx

@@ -1,4 +1,9 @@
-import { ComponentProps } from "./MarkdownViewer";
+/*
+ * Type-only on purpose: the sole static edge to MarkdownViewer must be
+ * erasable, so the viewer (and the mermaid chunk it lazily pulls) stays out
+ * of every eager bundle that imports this wrapper.
+ */
+import type { ComponentProps } from "./MarkdownViewer";
 import React, {
   FunctionComponent,
   LazyExoticComponent,
@@ -15,7 +20,23 @@ const LazyMarkdownViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): JSX.Element => {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense
+      fallback={
+        /*
+         * A bare "Loading..." string here painted raw English text in the
+         * middle of the page, then swapped it for content of a different
+         * height. Reserve roughly the space two lines of prose take instead.
+         *
+         * Spans rather than divs: callers such as EventItem render this inside
+         * a <p>, where block elements are invalid nesting.
+         */
+        <span role="status" aria-live="polite" className="block space-y-2">
+          <span className="block h-4 w-3/4 animate-pulse rounded bg-gray-100" />
+          <span className="block h-4 w-1/2 animate-pulse rounded bg-gray-100" />
+          <span className="sr-only">Loading content</span>
+        </span>
+      }
+    >
       <MarkdownViewer {...props} />
     </Suspense>
   );

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -76,7 +76,6 @@ SyntaxHighlighter.registerLanguage("ruby", ruby);
 SyntaxHighlighter.registerLanguage("php", php);
 SyntaxHighlighter.registerLanguage("graphql", graphql);
 SyntaxHighlighter.registerLanguage("http", http);
-import mermaid from "mermaid";
 import DOMPurify from "dompurify";
 import OneUptimeDate from "../../../Types/Date";
 import { Theme, useTheme } from "../../Utils/Theme";
@@ -90,7 +89,48 @@ import { Theme, useTheme } from "../../Utils/Theme";
 const ISO_8601_REGEX: RegExp =
   /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,6})?Z$/;
 
-const initializeMermaid: (theme: Theme) => void = (theme: Theme): void => {
+/*
+ * mermaid's pre-bundled build is ~4.5MB — by far the heaviest dependency of
+ * this component — so it is loaded on demand the first time a mermaid fence
+ * actually renders. Plain markdown (the overwhelmingly common case) never
+ * pays for it: there is no static import and no module-scope initialization.
+ * The promise is cached module-wide so multiple diagrams share one load, and
+ * theme setup runs only after the load resolves.
+ */
+type MermaidApi = typeof import("mermaid").default;
+
+let mermaidLoadPromise: Promise<MermaidApi> | null = null;
+
+const loadMermaid: () => Promise<MermaidApi> = (): Promise<MermaidApi> => {
+  if (!mermaidLoadPromise) {
+    const loadPromise: Promise<MermaidApi> = import("mermaid").then(
+      (mermaidModule: { default: MermaidApi }): MermaidApi => {
+        return mermaidModule.default;
+      },
+    );
+
+    mermaidLoadPromise = loadPromise;
+
+    /*
+     * A failed chunk load (flaky network, deploy rotating hashed chunk
+     * names) must not be cached forever — clear the slot so the next
+     * diagram retries the import. The reset rides a side branch of the
+     * promise: the original is still returned below, so the caller that
+     * triggered this load sees the rejection through its own error path.
+     */
+    loadPromise.catch((): void => {
+      if (mermaidLoadPromise === loadPromise) {
+        mermaidLoadPromise = null;
+      }
+    });
+  }
+  return mermaidLoadPromise;
+};
+
+const initializeMermaid: (mermaid: MermaidApi, theme: Theme) => void = (
+  mermaid: MermaidApi,
+  theme: Theme,
+): void => {
   const isDark: boolean = theme === Theme.Dark;
 
   mermaid.initialize({
@@ -120,10 +160,8 @@ const initializeMermaid: (theme: Theme) => void = (theme: Theme): void => {
   });
 };
 
-initializeMermaid(Theme.Light);
-
-// Mermaid diagram component
-const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
+// Mermaid diagram component (exported so tests can exercise the lazy load directly)
+export const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
   chart,
 }: {
   chart: string;
@@ -136,27 +174,34 @@ const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
     let isCancelled: boolean = false;
 
     const renderDiagram: () => Promise<void> = async (): Promise<void> => {
-      if (containerRef.current) {
+      try {
+        /*
+         * Dynamic load first; a failed chunk load surfaces through the same
+         * error path as a failed render. Theme setup MUST follow the load —
+         * there is deliberately no module-scope initialization any more.
+         */
+        const mermaid: MermaidApi = await loadMermaid();
+        if (!containerRef.current || isCancelled) {
+          return;
+        }
         containerRef.current.innerHTML = "";
-        try {
-          initializeMermaid(theme);
-          const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
-          const { svg } = await mermaid.render(id, chart);
-          if (containerRef.current && !isCancelled) {
-            containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
-              USE_PROFILES: { svg: true, svgFilters: true },
-              ADD_TAGS: ["foreignObject"],
-            });
-          }
-        } catch (error) {
-          if (containerRef.current && !isCancelled) {
-            const errorMessage: string = String(error);
-            const errorEl: HTMLPreElement = document.createElement("pre");
-            errorEl.className = "text-red-500";
-            errorEl.textContent = `Error rendering diagram: ${errorMessage}`;
-            containerRef.current.innerHTML = "";
-            containerRef.current.appendChild(errorEl);
-          }
+        initializeMermaid(mermaid, theme);
+        const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+        const { svg } = await mermaid.render(id, chart);
+        if (containerRef.current && !isCancelled) {
+          containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
+            USE_PROFILES: { svg: true, svgFilters: true },
+            ADD_TAGS: ["foreignObject"],
+          });
+        }
+      } catch (error) {
+        if (containerRef.current && !isCancelled) {
+          const errorMessage: string = String(error);
+          const errorEl: HTMLPreElement = document.createElement("pre");
+          errorEl.className = "text-red-500";
+          errorEl.textContent = `Error rendering diagram: ${errorMessage}`;
+          containerRef.current.innerHTML = "";
+          containerRef.current.appendChild(errorEl);
         }
       }
     };

package/UI/Components/MasterPage/MasterPage.tsx

@@ -30,6 +30,16 @@ const MasterPage: FunctionComponent<ComponentProps> = (
   const topSectionRef: React.RefObject<HTMLDivElement> =
     React.useRef<HTMLDivElement>(null);
 
+  /*
+   * The status page supplies neither header nor navbar — it renders its own
+   * inside children. Rendering TopSection anyway left an empty white bar with a
+   * drop shadow above the content, so only render it when it has something in
+   * it.
+   */
+  const hasTopSection: boolean = Boolean(
+    (!props.hideHeader && props.header) || props.navBar,
+  );
+
   /*
    * Publish the sticky top section's height as --app-header-height so anything
    * that sticks underneath it (the side menu, for example) can offset itself by
@@ -89,6 +99,7 @@ const MasterPage: FunctionComponent<ComponentProps> = (
     props.isLoading,
     props.error,
     props.disableMainContentWrapper,
+    hasTopSection,
     isOnline,
   ]);
 
@@ -125,17 +136,19 @@ const MasterPage: FunctionComponent<ComponentProps> = (
               Skip to main content
             </a>
           )}
-          <div
-            ref={topSectionRef}
-            className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
-          >
-            <TopSection
-              hideHeader={props.hideHeader}
-              className={props.topSectionClassName}
-              header={props.header}
-              navbar={props.navBar}
-            />
-          </div>
+          {hasTopSection && (
+            <div
+              ref={topSectionRef}
+              className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
+            >
+              <TopSection
+                hideHeader={props.hideHeader}
+                className={props.topSectionClassName}
+                header={props.header}
+                navbar={props.navBar}
+              />
+            </div>
+          )}
 
           {props.disableMainContentWrapper ? (
             props.children

package/UI/Components/Modal/Modal.tsx

@@ -413,7 +413,7 @@ const Modal: FunctionComponent<ComponentProps> = (
   return (
     <div className="relative z-50">
       <div
-        className={`fixed inset-0 bg-gray-950/45 backdrop-blur-[2px] transition-opacity duration-200 ease-out motion-reduce:transition-none ${
+        className={`fixed inset-0 bg-gray-950/45 backdrop-blur-[2px] transition-opacity duration-150 ease-out motion-reduce:transition-none ${
           hasEntered ? "opacity-100" : "opacity-0"
         }`}
         data-testid="modal-backdrop"
@@ -429,7 +429,7 @@ const Modal: FunctionComponent<ComponentProps> = (
         <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-6">
           <div
             ref={modalRef}
-            className={`relative flex max-h-[calc(100dvh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 transition duration-200 ease-out focus:outline-none motion-reduce:transition-none sm:my-8 sm:max-h-[calc(100dvh-4rem)] sm:rounded-xl ${modalWidthClassName} ${panelTransitionClassName}`}
+            className={`relative flex max-h-[calc(100dvh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 transition duration-150 ease-out focus:outline-none motion-reduce:transition-none sm:my-8 sm:max-h-[calc(100dvh-4rem)] sm:rounded-xl ${modalWidthClassName} ${panelTransitionClassName}`}
             data-testid="modal"
             aria-labelledby={titleId}
             aria-describedby={translatedDescription ? descriptionId : undefined}

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -47,7 +47,7 @@ import List from "../List/List";
 import { ListDetailProps } from "../List/ListRow";
 import ConfirmModal from "../Modal/ConfirmModal";
 import Modal, { ModalWidth } from "../Modal/Modal";
-import MarkdownViewer from "../Markdown.tsx/MarkdownViewer";
+import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import Icon from "../Icon/Icon";
 import Filter from "../ModelFilter/Filter";
 import { DropdownOption, DropdownOptionLabel } from "../Dropdown/Dropdown";

package/UI/Components/ModelTable/useCustomFieldColumns.ts

@@ -4,7 +4,7 @@ import {
   getCustomFieldColumns,
   getCustomFieldDefinitions,
 } from "./CustomFieldColumns";
-import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import ModelListCache from "../../Utils/ModelListCache";
 import ProjectUtil from "../../Utils/Project";
 import { Logger } from "../../Utils/Logger";
 import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
@@ -96,8 +96,14 @@ const useCustomFieldColumns: UseCustomFieldColumnsFunction = <
       setError("");
 
       try {
-        const result: ListResult<BaseModel> = await ModelAPI.getList<BaseModel>(
-          {
+        /*
+         * Through ModelListCache rather than ModelAPI: a table mounts two
+         * instances of this hook (the facet bar and the column set), and both
+         * want the same definition list - the cache turns that into one
+         * request, shared for the next minute.
+         */
+        const result: ListResult<BaseModel> =
+          await ModelListCache.getList<BaseModel>({
             modelType: customFieldsModelType,
             query: {
               projectId: projectId,
@@ -113,8 +119,8 @@ const useCustomFieldColumns: UseCustomFieldColumnsFunction = <
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any,
             sort: {},
-          },
-        );
+            projectId: projectId,
+          });
 
         if (isCancelled) {
           return;

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -114,6 +114,13 @@ const MoreMenu: React.ForwardRefExoticComponent<
 
     const [isDropdownVisible, setDropdownVisible] = useState<boolean>(false);
 
+    /*
+     * The menu is mounted in its closed state (faded, slightly shrunk towards
+     * origin-top-right) and flipped open one frame later so the browser has
+     * something to transition from — the same pattern Modal uses.
+     */
+    const [hasMenuEntered, setHasMenuEntered] = useState<boolean>(false);
+
     useEffect(() => {
       setDropdownVisible(isComponentVisible);
       if (isComponentVisible) {
@@ -123,6 +130,30 @@ const MoreMenu: React.ForwardRefExoticComponent<
       }
     }, [isComponentVisible]);
 
+    useEffect(() => {
+      if (!isComponentVisible) {
+        setHasMenuEntered(false);
+        return undefined;
+      }
+
+      const open: () => void = (): void => {
+        setHasMenuEntered(true);
+      };
+
+      const frame: number = requestAnimationFrame(open);
+
+      /*
+       * A hidden or throttled tab never runs an animation frame; the timer
+       * skips the transition rather than leaving the menu at zero opacity.
+       */
+      const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
+
+      return () => {
+        cancelAnimationFrame(frame);
+        clearTimeout(fallbackTimer);
+      };
+    }, [isComponentVisible]);
+
     useEffect(() => {
       if (props.isDisabled && isComponentVisible) {
         setIsComponentVisible(false);
@@ -427,7 +458,14 @@ const MoreMenu: React.ForwardRefExoticComponent<
           <div
             ref={ref}
             id={menuId}
-            className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1"
+            /*
+             * Once settled the menu carries no transform class at all: a
+             * lingering scale would make it the containing block for any
+             * position:fixed descendant (the Modal invariant).
+             */
+            className={`absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1 transition duration-150 ease-out motion-reduce:transition-none ${
+              hasMenuEntered ? "opacity-100" : "opacity-0 scale-95"
+            }`}
             role="menu"
             aria-orientation="vertical"
             aria-labelledby={buttonId}