codeant-ai-for-open-source[bot] commented on code in PR #34629:
URL: https://github.com/apache/superset/pull/34629#discussion_r3479707957
##########
superset-frontend/src/features/home/Menu.tsx:
##########
@@ -51,6 +51,10 @@ const StyledHeader = styled.header`
padding: 0 ${theme.sizeUnit * 4}px;
z-index: 10;
+ .main-nav {
+ display: flex;
Review Comment:
**Suggestion:** Forcing `.main-nav` to `display: flex` unconditionally
breaks Ant Design's inline/mobile menu mode. This component switches to
`mode="inline"` on small screens, where the menu relies on block layout;
overriding it to flex can flatten/overflow items and break expected responsive
navigation behavior. Restrict this style to horizontal mode (or desktop
breakpoint) instead of applying it globally. [css layout issue]
<details>
<summary><b>Severity Level:</b> Critical 🚨</summary>
```mdx
- ❌ Mobile main navigation items overflow and become unusable.
- ⚠️ RTL header layout overrides menu inline mode behavior.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open any backend-rendered view that mounts the standalone menu app, which
renders the
`Menu` component from `src/features/home/Menu.tsx` via
`src/views/menu.tsx:32-60` (`Menu`
imported at line 32 and used as `<Menu data={menu} />` at line 60).
2. In `src/features/home/Menu.tsx:193-206`, note `const { useBreakpoint } =
Grid;` and
`const screens = useBreakpoint();`, and that the main navigation is rendered
at
`Menu.tsx:32-57` as `<StyledMainNav mode={screens.md ? 'horizontal' :
'inline'} ...
className="main-nav" ... />` (verified by `grep` at lines 391-395).
3. In the same file, `StyledHeader` is defined at `Menu.tsx:47-66`, and its
nested rule
`.main-nav { display: flex; }` at lines 54-55 (the new PR change) applies to
the
`StyledMainNav` root element regardless of the `mode` prop (`horizontal` or
`inline`).
4. Reduce the browser viewport width below the Ant Design `md` breakpoint so
`screens.md`
becomes false, causing `StyledMainNav` to switch to `mode="inline"` while
still being
forced to `display: flex` by `.main-nav` (lines 54-55). Observe that
inline-mode menu
items no longer follow the expected stacked/block layout: they stay in a
flex row/overflow
configuration, degrading or breaking the responsive navigation on small
screens (menus
flattened, harder to scroll or tap).
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=5f9694935208498db67f9970e6f5a2d5&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
[](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=5f9694935208498db67f9970e6f5a2d5&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:** superset-frontend/src/features/home/Menu.tsx
**Line:** 54:55
**Comment:**
*Css Layout Issue: Forcing `.main-nav` to `display: flex`
unconditionally breaks Ant Design's inline/mobile menu mode. This component
switches to `mode="inline"` on small screens, where the menu relies on block
layout; overriding it to flex can flatten/overflow items and break expected
responsive navigation behavior. Restrict this style to horizontal mode (or
desktop breakpoint) instead of applying it globally.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F34629&comment_hash=00cac6a5587a65fd04431d5f8240324a2214f1e0306ec7760bd03a0c507ec265&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F34629&comment_hash=00cac6a5587a65fd04431d5f8240324a2214f1e0306ec7760bd03a0c507ec265&reaction=dislike'>👎</a>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
