codeant-ai-for-open-source[bot] commented on code in PR #40781:
URL: https://github.com/apache/superset/pull/40781#discussion_r3507816891
##########
superset-frontend/src/features/home/Menu.tsx:
##########
@@ -199,6 +199,9 @@ export function Menu({
isFrontendRoute = () => false,
}: MenuProps) {
const screens = useBreakpoint();
+ // screens.md is undefined on the first render before breakpoints are
measured;
+ // treat undefined as true so the nav renders horizontal instead of flashing
to inline
+ const isMd = screens.md !== false;
Review Comment:
**Suggestion:** Defaulting `isMd` to true whenever `screens.md` is not
explicitly false still causes a first-render layout mismatch on real mobile
viewports: initial render is forced to desktop/horizontal and then flips to
inline when breakpoints resolve. This reintroduces a navbar flash for mobile
users. Use a deterministic initial value derived from the actual viewport width
(or defer rendering mode until breakpoint resolution) so first paint matches
the device layout. [incorrect condition logic]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Mobile Superset navbar briefly renders desktop layout before snapping.
- ⚠️ Navigation bar alignment and dropdown affordances visually jump.
- ⚠️ Inconsistent first paint between desktop and mobile breakpoints.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Load the Superset menu entrypoint, which renders the top navbar using
<Menu data={menu}
/> in `superset-frontend/src/views/menu.tsx:17-34` after `initPreamble()`
resolves.
2. Open the application in a browser with a viewport narrower than the Ant
Design `md`
breakpoint (e.g., mobile device or devtools responsive mode < 768px) so that
`Grid.useBreakpoint()` will eventually produce `{ md: false, ... }`.
3. On first render of `Menu` in
`superset-frontend/src/features/home/Menu.tsx:32-47`,
`const screens = useBreakpoint();` returns an empty object `{}` (Ant Design
behavior),
making `screens.md` `undefined` and therefore `isMd = screens.md !== false`
evaluate to
`true`.
4. During this first paint, `StyledMainNav` at `Menu.tsx:231-236` receives
`mode={isMd ?
'horizontal' : 'inline'}` as `'horizontal'` and `RightMenu` at
`Menu.tsx:258-263` receives
`align={isMd ? 'flex-end' : 'flex-start'}`, so the navbar initially renders
in
desktop/horizontal layout even on a narrow/mobile viewport.
5. After Ant Design breakpoints resolve on the next render,
`useBreakpoint()` returns `{
md: false, ... }` for the same narrow viewport, so `isMd` flips to `false`,
`StyledMainNav` re-renders with `mode="inline"`, and `RightMenu` re-renders
with
`align="flex-start"`, causing a visible layout change where the navbar snaps
from
horizontal to vertical on mobile.
6. This reproduces the suggested issue: the fallback condition `screens.md
!== false`
intentionally fixes the flash for desktop widths but still causes a
first-render layout
mismatch and flash for real mobile/narrow viewports.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=2a7085e06a264b9f92401fde57f8243b&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=2a7085e06a264b9f92401fde57f8243b&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:** 204:204
**Comment:**
*Incorrect Condition Logic: Defaulting `isMd` to true whenever
`screens.md` is not explicitly false still causes a first-render layout
mismatch on real mobile viewports: initial render is forced to
desktop/horizontal and then flips to inline when breakpoints resolve. This
reintroduces a navbar flash for mobile users. Use a deterministic initial value
derived from the actual viewport width (or defer rendering mode until
breakpoint resolution) so first paint matches the device layout.
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%2F40781&comment_hash=348cd128f78dadca967a163a665e8a7ef954512c01ace0a700c5ad06e90d175a&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F40781&comment_hash=348cd128f78dadca967a163a665e8a7ef954512c01ace0a700c5ad06e90d175a&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]
