facebook / facebook/astryx

SideNav: collapsed child-menu popover shows an unintended rectangular inner border

Open Beginner friendly
#4,731 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
13.1k
Forks
1.1k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

## Problem

When SideNav is collapsed and a parent navigation group opens its child-menu popover, the menu surface appears to contain an additional sharp-cornered rectangular border. It is visible inside/alongside the rounded Popover surface, so the result looks like an accidental nested panel rather than one coherent menu.

This is especially noticeable for groups with several second-level items (for example, Governance → Manage Entities / Prepare Board / File & Report / Advise).

## Expected

The collapsed child menu should read as a single Popover surface:

- no extra inner rectangular outline, or
- if an inner container is intentional, its border/background should inherit or be clipped to the Popover radius.

## Why it matters

The visible right-angled frame conflicts with the Popover elevation and rounded surface, making the navigation feel visually broken in an otherwise tokenized UI.

## Suggested direction

Use the Popover surface as the only bordered surface for collapsed SideNav child menus. If the nested SideNav section needs a container for layout, make that container borderless or clip it to the outer radius.

## Reproduction

1. Render a SideNav with a collapsible parent section and child navigation items.
2. Collapse the SideNav.
3. Open that parent section’s child menu.
4. Observe the inset rectangular outline around the menu content.

I can provide a screenshot or a minimal reproduction if helpful.

## Screenshot from official template

> **Image placeholder — Shell / Side Nav template** Image
> Upload the screenshot showing the inset sharp-cornered rectangular outline inside the rounded collapsed SideNav child-menu popover.

This example is from an official Astryx template, not a consumer-specific implementation.

Contributor guide

Open the contributing guide

Research direction

Start at the SideNav collapsed child-menu entry point and inspect how it composes the Popover surface and its nested menu container. Reproduce the collapsed parent-menu flow described in the issue, then verify that the child menu presents one rounded bordered surface without an inset rectangular outline.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
70/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.