@oneuptime/common 11.4.0 → 11.5.0

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

@@ -815,7 +815,10 @@ const AreaChart: React.ForwardRefExoticComponent<
               wrapperStyle={{ outline: "none" }}
               isAnimationActive={true}
               animationDuration={100}
-              cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
+              cursor={{
+                stroke: "var(--ou-chart-cursor, #d1d5db)",
+                strokeWidth: 1,
+              }}
               offset={20}
               position={{ y: 0 }}
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -903,11 +906,11 @@ const AreaChart: React.ForwardRefExoticComponent<
                   }
                   return [low, high];
                 }}
-                stroke="#94a3b8"
+                stroke="var(--ou-chart-tick, #94a3b8)"
                 strokeOpacity={0.3}
                 strokeWidth={1}
                 strokeDasharray="3 3"
-                fill="#94a3b8"
+                fill="var(--ou-chart-tick, #94a3b8)"
                 fillOpacity={0.12}
                 isAnimationActive={false}
                 connectNulls={false}
@@ -1064,7 +1067,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                     y={exemplar.y}
                     r={5}
                     fill="#7c3aed"
-                    stroke="#ffffff"
+                    stroke="var(--ou-chart-marker-ring, #ffffff)"
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
                     onClick={() => {
@@ -1074,7 +1077,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                     <Label
                       value="E"
                       position="center"
-                      fill="#ffffff"
+                      fill="var(--ou-chart-marker-ring, #ffffff)"
                       fontSize={8}
                       fontWeight={700}
                     />

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

@@ -925,7 +925,10 @@ const BarChart: React.ForwardRefExoticComponent<
               wrapperStyle={{ outline: "none" }}
               isAnimationActive={true}
               animationDuration={100}
-              cursor={{ fill: "#d1d5db", opacity: "0.15" }}
+              cursor={{
+                fill: "var(--ou-chart-cursor, #d1d5db)",
+                opacity: "0.15",
+              }}
               offset={20}
               {...(layout === "horizontal"
                 ? { position: { y: 0 } }

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

@@ -813,7 +813,10 @@ const LineChart: React.ForwardRefExoticComponent<
               wrapperStyle={{ outline: "none" }}
               isAnimationActive={true}
               animationDuration={100}
-              cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
+              cursor={{
+                stroke: "var(--ou-chart-cursor, #d1d5db)",
+                strokeWidth: 1,
+              }}
               offset={20}
               position={{ y: 0 }}
               content={({ active, payload, label }: any) => {
@@ -1052,7 +1055,7 @@ const LineChart: React.ForwardRefExoticComponent<
                     y={exemplar.y}
                     r={5}
                     fill="#7c3aed"
-                    stroke="#ffffff"
+                    stroke="var(--ou-chart-marker-ring, #ffffff)"
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
                     onClick={() => {
@@ -1062,7 +1065,7 @@ const LineChart: React.ForwardRefExoticComponent<
                     <Label
                       value="E"
                       position="center"
-                      fill="#ffffff"
+                      fill="var(--ou-chart-marker-ring, #ffffff)"
                       fontSize={8}
                       fontWeight={700}
                     />

package/UI/Components/CodeBlock/CodeBlock.tsx

@@ -36,8 +36,9 @@ const CodeBlock: FunctionComponent<ComponentProps> = (
       {showCopyButton && typeof props.code === "string" && (
         <button
           onClick={handleCopy}
-          className="absolute top-2 right-2 p-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all opacity-0 group-hover:opacity-100 z-10"
+          className="absolute top-2 right-2 p-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all opacity-70 hover:opacity-100 focus-visible:opacity-100 group-hover:opacity-100 z-10"
           title={copied ? "Copied!" : "Copy to clipboard"}
+          aria-label={copied ? "Copied" : "Copy to clipboard"}
           type="button"
         >
           <Icon

package/UI/Components/CodeEditor/CodeEditor.tsx

@@ -1,6 +1,7 @@
 import Editor from "@monaco-editor/react";
 import CodeType from "../../../Types/Code/CodeType";
 import MarkdownUtil from "../../Utils/Markdown";
+import { Theme, useTheme } from "../../Utils/Theme";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -36,6 +37,7 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
   const [placeholder, setPlaceholder] = useState<string>("");
   const [helpText, setHelpText] = useState<string | ReactElement>("");
   const editorRef: React.MutableRefObject<any> = useRef<any>(null);
+  const theme: Theme = useTheme();
 
   useEffect(() => {
     let value: string | undefined = props.value;
@@ -138,6 +140,7 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
       )}
 
       <Editor
+        theme={theme === Theme.Dark ? "vs-dark" : "light"}
         defaultLanguage={props.type}
         height="30vh"
         value={value}

package/UI/Components/Divider/Divider.tsx

@@ -4,7 +4,7 @@ const Divider: () => JSX.Element = (): ReactElement => {
   return (
     <div
       className="w-full border-t border-gray-100"
-      style={{ borderColor: "#f9fafb" }}
+      style={{ borderColor: "var(--ou-border-subtle, #f9fafb)" }}
     ></div>
   );
 };

package/UI/Components/Dropdown/Dropdown.tsx

@@ -41,6 +41,12 @@ export interface DropdownOptionGroup {
   options: Array<DropdownOption>;
 }
 
+/*
+ * Modal surfaces use z-50. The portalled menu must sit above that stacking
+ * context so options are not painted underneath an anchored modal footer.
+ */
+export const DROPDOWN_MENU_Z_INDEX: number = 60;
+
 export interface ComponentProps {
   options: Array<DropdownOption | DropdownOptionGroup>;
   initialValue?: undefined | DropdownOption | Array<DropdownOption>;
@@ -334,8 +340,8 @@ const Dropdown: FunctionComponent<ComponentProps> = (
   } = (color?: string): { backgroundColor: string; color: string } => {
     if (!color) {
       return {
-        backgroundColor: "#e5e7eb", // gray-200
-        color: "#374151", // gray-700
+        backgroundColor: "var(--ou-surface-tertiary, #e5e7eb)",
+        color: "var(--ou-text-secondary, #374151)",
       };
     }
 
@@ -511,6 +517,9 @@ const Dropdown: FunctionComponent<ComponentProps> = (
     setValue(value);
   }, [props.value]);
 
+  const menuPortalTarget: HTMLElement | null =
+    typeof document === "undefined" ? null : document.body;
+
   return (
     <div
       id={props.id}
@@ -710,11 +719,11 @@ const Dropdown: FunctionComponent<ComponentProps> = (
           menuPortal: (base: CSSObjectWithLabel): CSSObjectWithLabel => {
             return {
               ...base,
-              zIndex: 50,
+              zIndex: DROPDOWN_MENU_Z_INDEX,
             };
           },
         }}
-        menuPortalTarget={document.body}
+        menuPortalTarget={menuPortalTarget}
         menuPosition="fixed"
         isClearable={true}
         isSearchable={true}

package/UI/Components/EntityDropdown/EntityDropdown.tsx

@@ -10,6 +10,7 @@ import ObjectID from "../../../Types/ObjectID";
 import ModelAPI, { ListResult } from "../../Utils/ModelAPI/ModelAPI";
 import Icon from "../Icon/Icon";
 import {
+  DROPDOWN_MENU_Z_INDEX,
   DropdownOption,
   DropdownOptionGroup,
   DropdownOptionLabel,
@@ -20,6 +21,7 @@ import React, {
   ReactElement,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -107,6 +109,18 @@ export interface EntityDropdownProps {
 const SEARCH_DEBOUNCE_MS: number = 250;
 const SEARCH_PAGE_SIZE: number = 50;
 const LABEL_PREVIEW_LIMIT: number = 50;
+const MENU_GAP_PX: number = 4;
+const MENU_MAX_HEIGHT_PX: number = 384;
+const MENU_MIN_USEFUL_HEIGHT_PX: number = 160;
+const MENU_VIEWPORT_PADDING_PX: number = 8;
+
+interface EntityDropdownMenuPosition {
+  bottom?: number | undefined;
+  left: number;
+  maxHeight: number;
+  top?: number | undefined;
+  width: number;
+}
 
 const flattenOptions: (
   options: Array<DropdownOption | DropdownOptionGroup> | undefined,
@@ -441,12 +455,91 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
 
   const containerRef: React.MutableRefObject<HTMLDivElement | null> =
     useRef<HTMLDivElement | null>(null);
+  const controlRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
   const inputRef: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
   const debounceRef: React.MutableRefObject<number | null> = useRef<
     number | null
   >(null);
   const searchSeqRef: React.MutableRefObject<number> = useRef<number>(0);
+  const [menuPosition, setMenuPosition] =
+    useState<EntityDropdownMenuPosition | null>(null);
+
+  const updateMenuPosition: () => void = useCallback((): void => {
+    if (!controlRef.current || typeof window === "undefined") {
+      return;
+    }
+
+    const controlRect: DOMRect = controlRef.current.getBoundingClientRect();
+    const availableWidth: number = Math.max(
+      0,
+      window.innerWidth - MENU_VIEWPORT_PADDING_PX * 2,
+    );
+    const width: number = Math.min(controlRect.width, availableWidth);
+    const maximumLeft: number = Math.max(
+      MENU_VIEWPORT_PADDING_PX,
+      window.innerWidth - MENU_VIEWPORT_PADDING_PX - width,
+    );
+    const left: number = Math.min(
+      Math.max(controlRect.left, MENU_VIEWPORT_PADDING_PX),
+      maximumLeft,
+    );
+    const spaceBelow: number = Math.max(
+      0,
+      window.innerHeight -
+        controlRect.bottom -
+        MENU_GAP_PX -
+        MENU_VIEWPORT_PADDING_PX,
+    );
+    const spaceAbove: number = Math.max(
+      0,
+      controlRect.top - MENU_GAP_PX - MENU_VIEWPORT_PADDING_PX,
+    );
+    const shouldOpenAbove: boolean =
+      spaceBelow < MENU_MIN_USEFUL_HEIGHT_PX && spaceAbove > spaceBelow;
+    const availableHeight: number = shouldOpenAbove ? spaceAbove : spaceBelow;
+
+    setMenuPosition({
+      bottom: shouldOpenAbove
+        ? window.innerHeight - controlRect.top + MENU_GAP_PX
+        : undefined,
+      left,
+      maxHeight: Math.min(MENU_MAX_HEIGHT_PX, availableHeight),
+      top: shouldOpenAbove ? undefined : controlRect.bottom + MENU_GAP_PX,
+      width,
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      setMenuPosition(null);
+      return;
+    }
+
+    let animationFrame: number | null = null;
+    const schedulePositionUpdate: () => void = (): void => {
+      if (animationFrame !== null) {
+        return;
+      }
+      animationFrame = window.requestAnimationFrame((): void => {
+        animationFrame = null;
+        updateMenuPosition();
+      });
+    };
+
+    updateMenuPosition();
+    window.addEventListener("resize", schedulePositionUpdate);
+    document.addEventListener("scroll", schedulePositionUpdate, true);
+
+    return () => {
+      window.removeEventListener("resize", schedulePositionUpdate);
+      document.removeEventListener("scroll", schedulePositionUpdate, true);
+      if (animationFrame !== null) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+    };
+  }, [isOpen, selectedKeys, updateMenuPosition]);
 
   // Click-outside closes the popover.
   useEffect(() => {
@@ -1106,7 +1199,7 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
         </div>
       )}
 
-      <div className="relative">
+      <div ref={controlRef} className="relative">
         {/*
          * Single-select shows the resolved label in-place when closed so the
          * chrome looks like a static value field. Click anywhere on the
@@ -1281,6 +1374,11 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
                   return;
                 }
                 if (event.key === "Escape") {
+                  /*
+                   * The modal also listens for Escape. Consume it here so the
+                   * first press closes the menu without dismissing the form.
+                   */
+                  event.preventDefault();
                   setIsOpen(false);
                   setHighlightedIndex(-1);
                   return;
@@ -1329,8 +1427,18 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
 
       {isOpen && !props.disabled && (
         <div
-          className="absolute z-20 mt-1 flex max-h-96 w-full flex-col overflow-hidden rounded-md border border-gray-200 bg-white text-sm shadow-lg"
+          className="fixed flex flex-col overflow-hidden rounded-md border border-gray-200 bg-white text-sm shadow-lg"
+          data-testid="entity-dropdown-menu"
           role="listbox"
+          style={{
+            bottom: menuPosition?.bottom,
+            left: menuPosition?.left ?? 0,
+            maxHeight: menuPosition?.maxHeight,
+            top: menuPosition?.top,
+            visibility: menuPosition ? "visible" : "hidden",
+            width: menuPosition?.width ?? 0,
+            zIndex: DROPDOWN_MENU_Z_INDEX,
+          }}
         >
           {labelsTabEnabled && (
             <div className="flex flex-shrink-0 items-center gap-1 border-b border-gray-100 bg-gray-50 px-1.5 py-1">

package/UI/Components/ErrorBoundary.tsx

@@ -15,7 +15,8 @@ const Fallback: FunctionComponent = () => {
         bottom: "0",
         left: "0",
         right: "0",
-        backgroundColor: "#fdfdfd",
+        backgroundColor: "var(--ou-background-primary, #fdfdfd)",
+        color: "var(--ou-text-primary, #111827)",
         zIndex: "999",
         display: "flex",
         justifyContent: "center",

package/UI/Components/EventItem/EventItem.tsx

@@ -168,8 +168,8 @@ const EventItem: FunctionComponent<ComponentProps> = (
                     text={item}
                     color={VeryLightGray}
                     style={{
-                      backgroundColor: "#f3f4f6",
-                      color: "#9ca3af",
+                      backgroundColor: "var(--ou-surface-tertiary, #f3f4f6)",
+                      color: "var(--ou-text-subtle, #9ca3af)",
                     }}
                   />
                 );

package/UI/Components/GanttChart/Bar/Index.tsx

@@ -137,7 +137,7 @@ const Bar: FunctionComponent<ComponentProps> = (
           marginLeft: `${barWidth + 15}px`,
           opacity: barOpacity,
           fontWeight: props.isHighlighted ? 600 : undefined,
-          color: props.isHighlighted ? "#4338ca" : undefined,
+          color: props.isHighlighted ? "var(--ou-link, #4338ca)" : undefined,
         }}
       >
         <BarLabel label={props.bar.label} />

package/UI/Components/Graphs/UptimeBarTooltip.tsx

@@ -72,7 +72,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           gap: "8px",
           paddingBottom: "10px",
           marginBottom: "10px",
-          borderBottom: "1px solid #f0f0f0",
+          borderBottom: "1px solid var(--ou-border-subtle, #f0f0f0)",
         }}
       >
         <svg
@@ -80,7 +80,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           height="14"
           viewBox="0 0 24 24"
           fill="none"
-          stroke="#9ca3af"
+          stroke="var(--ou-text-subtle, #9ca3af)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -95,7 +95,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           style={{
             fontWeight: 600,
             fontSize: "13px",
-            color: "#111827",
+            color: "var(--ou-text-primary, #111827)",
             letterSpacing: "-0.01em",
           }}
         >
@@ -121,7 +121,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             <span
               style={{
                 fontSize: "11px",
-                color: "#6b7280",
+                color: "var(--ou-text-muted, #6b7280)",
                 fontWeight: 500,
               }}
             >
@@ -165,7 +165,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                 overflow: "hidden",
                 display: "flex",
                 gap: "1px",
-                backgroundColor: "#e5e7eb",
+                backgroundColor: "var(--ou-border-default, #e5e7eb)",
               }}
             >
               {sortedDurations.map((status: StatusDuration, index: number) => {
@@ -191,7 +191,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
               style={{
                 width: "100%",
                 height: "4px",
-                backgroundColor: "#e5e7eb",
+                backgroundColor: "var(--ou-border-default, #e5e7eb)",
                 borderRadius: "100px",
                 overflow: "hidden",
               }}
@@ -213,7 +213,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
       {!props.hasEvents && (
         <div
           style={{
-            backgroundColor: "#f9fafb",
+            backgroundColor: "var(--ou-surface-secondary, #f9fafb)",
             borderRadius: "8px",
             padding: "16px",
             textAlign: "center",
@@ -224,7 +224,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#d1d5db"
+            stroke="var(--ou-border-strong, #d1d5db)"
             strokeWidth="1.5"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -237,7 +237,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           <div
             style={{
               fontSize: "12px",
-              color: "#9ca3af",
+              color: "var(--ou-text-subtle, #9ca3af)",
               fontWeight: 500,
             }}
           >
@@ -252,7 +252,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           style={{
             paddingBottom: hasIncidents ? "10px" : "0",
             marginBottom: hasIncidents ? "10px" : "0",
-            borderBottom: hasIncidents ? "1px solid #f0f0f0" : "none",
+            borderBottom: hasIncidents
+              ? "1px solid var(--ou-border-subtle, #f0f0f0)"
+              : "none",
           }}
         >
           {sortedDurations.map((status: StatusDuration, index: number) => {
@@ -291,7 +293,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                   <span
                     style={{
                       fontSize: "12px",
-                      color: "#374151",
+                      color: "var(--ou-text-secondary, #374151)",
                       fontWeight: 500,
                       whiteSpace: "nowrap",
                       overflow: "hidden",
@@ -306,7 +308,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                   style={{
                     flex: 1,
                     height: "4px",
-                    backgroundColor: "#f3f4f6",
+                    backgroundColor: "var(--ou-surface-tertiary, #f3f4f6)",
                     borderRadius: "100px",
                     overflow: "hidden",
                   }}
@@ -325,7 +327,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                 <span
                   style={{
                     fontSize: "11px",
-                    color: status.isDowntime ? "#dc2626" : "#6b7280",
+                    color: status.isDowntime
+                      ? "var(--ou-danger-text, #b91c1c)"
+                      : "var(--ou-text-muted, #6b7280)",
                     fontWeight: status.isDowntime ? 600 : 400,
                     fontVariantNumeric: "tabular-nums",
                     whiteSpace: "nowrap",
@@ -356,7 +360,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             <span
               style={{
                 fontSize: "11px",
-                color: "#6b7280",
+                color: "var(--ou-text-muted, #6b7280)",
                 fontWeight: 500,
                 flex: 1,
               }}
@@ -367,8 +371,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
               style={{
                 fontSize: "10px",
                 fontWeight: 600,
-                color: "#dc2626",
-                backgroundColor: "#fef2f2",
+                color: "var(--ou-danger-text, #b91c1c)",
+                backgroundColor:
+                  "color-mix(in srgb, #ef4444 14%, var(--ou-surface-primary, #ffffff))",
                 padding: "1px 7px",
                 borderRadius: "9999px",
                 lineHeight: "1.6",
@@ -400,21 +405,23 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                     marginBottom: "6px",
                     cursor: isClickable ? "pointer" : "default",
                     transition: "background-color 0.12s ease",
-                    backgroundColor: "#fafafa",
+                    backgroundColor: "var(--ou-surface-secondary, #fafafa)",
                     borderRadius: "0 6px 6px 0",
                   }}
                   onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
                     if (isClickable) {
                       (
                         e.currentTarget as HTMLDivElement
-                      ).style.backgroundColor = "#f3f4f6";
+                      ).style.backgroundColor =
+                        "var(--ou-surface-tertiary, #f3f4f6)";
                     }
                   }}
                   onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
                     if (isClickable) {
                       (
                         e.currentTarget as HTMLDivElement
-                      ).style.backgroundColor = "#fafafa";
+                      ).style.backgroundColor =
+                        "var(--ou-surface-secondary, #fafafa)";
                     }
                   }}
                 >
@@ -431,7 +438,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                         flex: 1,
                         minWidth: 0,
                         fontSize: "12px",
-                        color: "#111827",
+                        color: "var(--ou-text-primary, #111827)",
                         fontWeight: 600,
                         lineHeight: "1.3",
                         overflow: "hidden",
@@ -451,7 +458,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                       >
                         <path
                           d="M6 3l5 5-5 5"
-                          stroke="#6b7280"
+                          stroke="var(--ou-text-muted, #6b7280)"
                           strokeWidth="1.5"
                           strokeLinecap="round"
                           strokeLinejoin="round"
@@ -509,7 +516,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                     <span
                       style={{
                         fontSize: "10px",
-                        color: "#b0b0b0",
+                        color: "var(--ou-text-subtle, #b0b0b0)",
                         marginLeft: "auto",
                         whiteSpace: "nowrap",
                       }}
@@ -528,7 +535,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             <div
               style={{
                 fontSize: "11px",
-                color: "#9ca3af",
+                color: "var(--ou-text-subtle, #9ca3af)",
                 textAlign: "center",
                 padding: "4px 0 0",
                 fontWeight: 500,

package/UI/Components/Header/Header.tsx

@@ -3,6 +3,7 @@ import React, { FunctionComponent, ReactElement } from "react";
 export interface ComponentProps {
   leftComponents?: undefined | Array<ReactElement> | ReactElement;
   rightComponents?: undefined | Array<ReactElement> | ReactElement;
+  mobileRightComponents?: undefined | Array<ReactElement> | ReactElement;
   centerComponents?: undefined | Array<ReactElement> | ReactElement;
   className?: string | undefined;
 }
@@ -28,6 +29,12 @@ const Header: FunctionComponent<ComponentProps> = (
           </div>
         )}
 
+        {props.mobileRightComponents && (
+          <div className="relative z-20 flex items-center lg:hidden">
+            {props.mobileRightComponents}
+          </div>
+        )}
+
         <div className="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center lg:gap-2">
           {props.rightComponents}
         </div>

package/UI/Components/Header/HeaderIconDropdownButton.tsx

@@ -19,6 +19,7 @@ export interface ComponentProps {
   onClick?: (() => void) | undefined;
   name: string;
   showDropdown: boolean;
+  isPressed?: boolean | undefined;
 }
 
 const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
@@ -53,6 +54,7 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
           id={hasDropdown ? "user-menu-button" : undefined}
           aria-expanded={hasDropdown ? isDropdownVisible : undefined}
           aria-haspopup={hasDropdown ? "true" : undefined}
+          aria-pressed={props.isPressed}
           onClick={() => {
             props.onClick?.();
             setIsComponentVisible(!isDropdownVisible);

package/UI/Components/Icon/Icon.tsx

@@ -2938,18 +2938,20 @@ const Icon: FunctionComponent<ComponentProps> = ({
     );
   } else if (icon === IconProp.Podman) {
     /*
-     * Podman mark — a simplified, bold silhouette of Podman's seal mascot.
-     * The official emblem (a finely detailed seal inside a hexagonal frame)
-     * collapses into an illegible blob at small sizes, so this is a cleaner
-     * single-path seal that stays recognizable down to ~16px and sits well
-     * beside the other resource brand logos (Docker / Proxmox / Ceph).
+     * Podman mark — a clean side-profile silhouette of Podman's seal mascot:
+     * head raised with a visible eye, an arched back, and trailing tail
+     * flippers. The official emblem (a finely detailed seal inside a hexagonal
+     * frame) collapses into an illegible blob at small sizes, so this reads as
+     * a recognizable little sea creature down to ~16px and sits well beside the
+     * other resource brand logos (Docker / Proxmox / Ceph). The eye is punched
+     * out via the even-odd fill rule.
      */
     return getSvgWrapper(
       <path
         fill="currentColor"
         stroke="none"
         fillRule="evenodd"
-        d="M6.4 7.2C6.2 5.2 7.8 3.7 9.7 3.9C11.2 4.1 12.2 5.3 12.3 6.8C13 6.4 14 6.6 14.4 7.4C14.8 8.1 14.5 8.9 13.9 9.3C15.4 11 16.2 13.4 16.2 15.7C17.1 15.6 18.2 15.9 18.6 16.7C18.2 17.6 17 18.2 15.7 18.1C14 18 12.7 16.7 12.4 15C11.7 16.9 10.1 18.2 8.3 18.1C7.2 18 6.9 17.1 7.6 16.5C8.7 15.6 9.1 14 8.8 12.4C8.6 11 8 9.6 7.3 8.5C6.8 8.3 6.5 7.8 6.4 7.2ZM8.45 6.4a0.85 0.85 0 1 0 1.7 0a0.85 0.85 0 1 0 -1.7 0z"
+        d="M6.6 8.4C6.2 6.6 7.4 5 9.2 4.9c1.6-.1 2.9 1 3.5 2.2.7-.5 1.7-.7 2.5-.2.6.36.8 1.06.5 1.6 1.9 1.3 3.2 3.4 3.6 5.9.9-.15 1.9.15 2.3.95.35.75-.2 1.45-1.1 1.7-1.5.42-3.2-.15-4.1-1.5-.3.95-.9 1.75-1.7 2.25 1.2.5 2 1.2 1.6 2-.3.6-1.2.7-2.2.4-1.7-.5-3-1.9-3.4-3.6-.9.9-2.2 1.4-3.5 1.3-1-.1-1.5-.8-1.2-1.5.25-.6.9-.9 1.6-1-1-1.5-1.5-3.4-1.4-5.3-.6-.3-1.05-.85-1.1-1.55ZM8.4 8a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
       />,
     );
   } else if (icon === IconProp.Proxmox) {