Popup component missing theme class causes styled elements (e.g., underlines) to not render correctly

[zensolution]

Description

After upgrading Argo Workflows from v3.4.9 to v3.7.9, I noticed that the Intermediate Parameters dialog is missing its underline styling. See the attached screenshots comparing the two versions.

Root Cause Analysis

After investigating, I found that the Popup component does not include the theme-light (or theme-dark) class on its root element, while the main page layout does.

The Layout component correctly applies the theme class:

export const Layout = (props: LayoutProps) => (
    <div className={props.theme ? 'theme-' + props.theme : 'theme-light'}>

However, the Popup component does not:

export const Popup = (props: PopupProps) => (
    <div className='popup-overlay'>

Since popups are rendered outside the main Layout DOM tree (likely via a portal), they don't inherit the theme-light class. This causes any styles that rely on the themify mixin (which generates selectors like .theme-light &) to not apply—resulting in missing underlines, borders, and other themed styles.

Proposed Fix

Add a theme prop to the Popup component and apply the theme class to the root element, similar to how Layout does:

export interface BasePopupProps {
    icon?: { name: string; color: string; };
    titleColor?: string;
    title: string | React.ReactNode;
    footer?: React.ReactNode;
    theme?: string;  // Add theme prop
}

export const Popup = (props: PopupProps) => (
    <div className={`popup-overlay ${props.theme ? 'theme-' + props.theme : 'theme-light'}`}>

Screenshots

• v3.4.9 (with underline): [attach screenshot]
• v3.7.9 (missing underline): [attach screenshot]

Environment

• Argo Workflows version: 3.7.9
• Previous working version: 3.4.9

---

Thanks in advance.