fix nav menu dropdown clipping

[ralphptorres]

use portaled nav dropdowns to resolve clipping in notebook cells while supporting hover, click, and keyboard interactions

closes #7167

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	May 10, 2026 8:50am

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[cubic-dev-ai]

1 issue found across 2 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/css/app/Cell.css">

<violation number="1" location="frontend/src/css/app/Cell.css:100">
P2: `overflow: visible !important` will override the table-specific `overflow: hidden` (line ~109) on hover/focus, since `!important` trumps specificity. Consider scoping the rule to exclude the table case, e.g. using `:not(:has(> .output:only-child > marimo-ui-element:only-child > marimo-table))`, or adding a matching `!important` to the table rule to preserve its override.</violation>
</file>

Architecture diagram

sequenceDiagram
    participant User as User
    participant Nav as NavigationMenu
    participant Cell as Notebook Cell
    participant Output as Output Area
    participant Stack as Z-Index Context
    
    Note over User,Stack: Nav Menu Dropdown Display Flow
    
    User->>Nav: Hover/focus nav menu trigger
    Nav->>Nav: Check orientation & visibility
    Nav->>Stack: Set z-index to 50
    Stack-->>Nav: Elevated stacking
    
    Note over Nav,Cell: Menu dropdown now stacks above cell
    
    User->>Cell: Scroll or interact with notebook
    Cell->>Cell: hover output area
    
    alt Output area has content overflow
        Cell->>Output: NEW: overflow: visible (on hover/focus-within)
        Output->>Output: Display full content without clipping
        Output-->>Cell: Content visible
    else Output area no overflow
        Output->>Output: Normal overflow behavior
    end
    
    Note over Cell,Output: Previously: overflow was hidden/clipped
    
    Cell->>Stack: Maintain default z-index context
    Stack-->>Nav: Nav dropdown remains on top (z=50)

Loading

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review, or fix all with cubic.}

[ralphptorres]

I have read the CLA Document and I hereby sign the CLA

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[ralphptorres]

recheck

[cubic-dev-ai]

3 issues found across 3 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/css/app/Cell.css">

<violation number="1">
P2: Removing the hover/focus overflow override regresses interactive outputs by keeping `.output-area` clipped (`overflow: auto`) even when menus/popovers need to extend outside the cell.</violation>
</file>

<file name="frontend/src/plugins/layout/NavigationMenuPlugin.tsx">

<violation number="1" location="frontend/src/plugins/layout/NavigationMenuPlugin.tsx:135">
P2: Controlled popover ignores open requests, so the dropdown cannot open via click/keyboard/touch and becomes hover-only.</violation>
</file>

<file name="frontend/src/components/ui/navigation.tsx">

<violation number="1">
P2: Lowering the navigation menu root from z-50 to z-10 regresses the dropdown’s stacking order and can put it behind surrounding UI, undermining the clipping fix.</violation>
</file>

_{Tip: Review your code locally with the cubic CLI to iterate faster.}

[ralphptorres]

@mscolnick thanks for the suggestion, applied it!

quick question: this dropdown currently opens on hover, while most other buttons in the ui open (and close) dropdowns on click. should i align this behavior? it's outside this commit's scope but we're already in these files

[mscolnick]

i think this changes more than i'd expect. ideally there is a NavigationPortal (open issue here: radix-ui/primitives#3159). maybe in the meantime we can keep the navigation components and maybe create our own <NavigationPortal (example here: radix-ui/primitives@c95104b#diff-8e96b8f4b466ef7144a8f478a3e0c8afcecc7f42ab59b0af0595889df64f1c28R1105)