Pull request overview

Applies the shared popover container styling to the Main Menu popover so it matches other popovers/menus across the app, including adding a visible border in dark mode.

Changes:

• Import and use getPopoverContainerStyle for the main menu StatefulPopover Body override.
• Standardize main menu popover border/shadow behavior with the shared popover styling used elsewhere.

Summary

This PR applies the shared getPopoverContainerStyle utility to the MainMenu popover in MainMenu.tsx, replacing a hardcoded boxShadow: theme.shadows.popover style. This aligns the main menu's visual treatment with other popover/dropdown menus across the codebase (Selectbox, Multiselect, DateInput, DataFrame menus, st.popover, TopNavSection, etc.). The practical effect is adding a visible border around the main menu in dark mode, where the shadow alone was insufficient to visually distinguish the popover from the background.

The diff is a 2-line change in a single file: one new import and one style-object swap.

Code Quality

All three reviewers unanimously agree the change is minimal, clean, and well-targeted. It follows established patterns — at least 10 other components in the codebase already use getPopoverContainerStyle. The import is placed in the correct alphabetical position, and the spread syntax ...getPopoverContainerStyle(theme) is idiomatic and consistent with how TopNavSection.tsx and Popover.tsx use the same function in their BaseWeb Body style overrides. No issues identified.

Test Coverage

• Unit tests: The existing 108 MainMenu.test.tsx tests pass. No unit tests assert on inline style values for the popover Body override, so no changes are needed.
• E2E tests: The test_main_menu_images e2e test captures snapshots of the popover in both light and dark themes. The dark-mode snapshots will need regeneration to reflect the new border styling — this is expected workflow for visual changes.
• Utility coverage: getPopoverContainerStyle itself is well-covered through the many other components that use it.

One reviewer (gpt-5.3-codex-high) suggested adding a focused unit test assertion for dark-mode main menu popover styling (e.g., border presence) to guard against future visual regressions. This is a reasonable but non-blocking suggestion — the existing E2E snapshot tests already cover visual appearance.

Backwards Compatibility

No breaking changes. This is a purely visual CSS change applied through an existing shared utility. No props, APIs, component behavior, DOM structure, or test IDs are affected.

Security & Risk

No security concerns. The change modifies CSS properties (border, box-shadow, border-radius, box-sizing) on the popover wrapper element. No new dependencies, no JavaScript behavior changes, no dynamic code execution.

External test recommendation

• Recommend external_test: No
• Triggered categories: None
• Evidence:
  • frontend/app/src/components/MainMenu/MainMenu.tsx: CSS-only styling change to popover Body override. No routing, auth, WebSocket, embedding, asset serving, cross-origin, storage, or security header changes.
• Suggested external_test focus areas: N/A
• Confidence: High
• Assumptions and gaps: None. The change is confined to a single CSS style object on a BaseWeb popover override.

All three reviewers independently reached the same conclusion with high confidence.

Accessibility

No accessibility regressions. The change only affects visual styling. All ARIA attributes, keyboard navigation, focus management, and semantic HTML remain unchanged. All three reviewers noted the added border in dark mode may slightly improve visual accessibility by making the menu easier to distinguish from the background.

Recommendations

No blocking recommendations. The optional suggestion to add a targeted unit test for dark-mode border styling is noted but not required given existing E2E snapshot coverage.

Verdict

APPROVED: All three reviewers (claude-4.6-opus-high-thinking, gemini-3.1-pro, gpt-5.3-codex-high) unanimously approved. The change is a clean, minimal fix that aligns MainMenu popover styling with the shared getPopoverContainerStyle utility already used across the codebase, adding a visible border in dark mode for visual consistency. No critical or blocking issues were raised.

This is a consolidated AI review by claude-4.6-opus-high-thinking, synthesizing reviews from: claude-4.6-opus-high-thinking, gemini-3.1-pro, gpt-5.3-codex-high.

Summary

This PR standardizes the main menu popover styling by replacing a component-specific boxShadow override with the shared getPopoverContainerStyle(theme) helper in frontend/app/src/components/MainMenu/MainMenu.tsx. This aligns the main menu with all other popover-based menus in the codebase (dropdowns, dataframe menus, color picker, navigation popover, etc.). The practical visual effect is a visible border around the menu in dark mode; light mode is visually unchanged. The PR also updates 9 E2E snapshot images across 3 browsers covering both themes and the custom-fonts test.

Reviewer consensus: All 3 of 3 reviewers (claude-4.6-opus-high-thinking, gemini-3.1-pro, gpt-5.3-codex-high) unanimously approved with no changes requested and no inline comments.

Code Quality

All reviewers agreed the code quality is excellent. The change is small, focused, and follows the established pattern precisely — TopNavSection.tsx already uses the identical ...getPopoverContainerStyle(theme) spread. The import comes from the existing @streamlit/lib barrel export. No new code or abstractions are introduced; this is purely a consistency alignment that improves maintainability by removing a one-off style override.

Test Coverage

Coverage is adequate for this UI-only change:

• Unit tests: The existing 108 MainMenu.test.tsx unit tests continue to pass. They don't assert specific CSS styles on the popover body, so no unit test changes are needed.
• E2E snapshots: All relevant snapshot images are updated — main_menu_test (6 images: dark/light × 3 browsers) and custom_theme_fonts_test (3 images: 3 browsers). This fully covers the visual regression.
• No new behavioral tests are needed since no behavior changed — only CSS properties on the popover container.

Backwards Compatibility

No breaking changes. All reviewers agreed this is a purely cosmetic CSS change to an internal UI element. No public API, protobuf, or behavioral changes are involved. The switch from boxShadow-only to the full getPopoverContainerStyle spread adds box-sizing, border-radius, and border properties via BaseWeb's style override, mirroring exactly what all other popovers already do.

Security & Risk

No security concerns. All reviewers confirmed the change modifies only CSS properties on a popover container — no new dependencies, DOM manipulation, script execution, external requests, auth, session, websocket, or server-side changes.

External test recommendation

• Recommend external_test: No
• Triggered categories: None
• Evidence:
  • frontend/app/src/components/MainMenu/MainMenu.tsx: Pure CSS style change on a popover container — no routing, auth, websocket, embedding, asset serving, cross-origin, storage, or security header changes.
  • Snapshot files are visual baseline updates only.
• Suggested external_test focus areas: N/A
• Confidence: High (unanimous across all reviewers)
• Assumptions and gaps: None — the change is entirely cosmetic with no integration surface.

Accessibility

All reviewers assessed this as neutral-to-positive for accessibility. Adding a visible border in dark mode improves the visual distinction between the popover and its background, benefiting users with low contrast sensitivity. No interactive elements, ARIA attributes, focus behavior, or keyboard navigation are affected.

Recommendations

No changes requested. The PR is clean, minimal, follows existing patterns, and has appropriate snapshot coverage.

Verdict

APPROVED: Clean, focused CSS consistency fix that aligns the main menu popover styling with all other popovers in the codebase, unanimously approved by all 3 reviewers with no issues raised.

Consolidated AI review by claude-4.6-opus-high-thinking from 3 individual reviews (claude-4.6-opus-high-thinking, gemini-3.1-pro, gpt-5.3-codex-high). All expected models completed their reviews successfully.

LGTM