fix(nav): prevent top navbar from flashing to vertical layout on load by aminghadersohi · Pull Request #40781 · apache/superset

aminghadersohi · 2026-06-04T22:36:30Z

Summary

Grid.useBreakpoint() (Ant Design) returns an empty object {} on the first render before viewport breakpoints are measured. This made screens.md undefined (falsy), so screens.md ? 'horizontal' : 'inline' evaluated to 'inline' on first paint — rendering the navbar as a vertical stack. After the next render cycle the breakpoint resolved and the nav snapped to horizontal, producing a visible layout flash on every page load.

Fix: Replace screens.md with const isMd = screens.md !== false, which treats the initial undefined as true (desktop/horizontal layout) and only switches to mobile/inline layout when screens.md is explicitly false. All three screens.md usages in Menu.tsx (mode, align, and the dropdown icon spread) are updated to use isMd.

Testing

Tested by loading a Superset workspace and verifying the top navbar renders horizontally on first paint with no layout flash. Responsive behavior (switching to inline on narrow viewports) is preserved.

Checklist

Local testing done
Tests added/updated
Documentation updated (if needed)

Fixes: sc-108034

🤖 Generated with Claude Code

Grid.useBreakpoint() returns {} on first render before viewport is measured, making screens.md undefined (falsy) and causing the nav to render in 'inline' (vertical) mode before snapping to 'horizontal'. Using `screens.md !== false` treats the undefined initial state as true, so the nav starts in horizontal mode and only switches to inline on genuinely narrow viewports. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

bito-code-review · 2026-06-04T22:36:41Z

Code Review Agent Run #706786

Actionable Suggestions - 0

Review Details

Files reviewed - 1 · Commit Range: 115f629..115f629
- superset-frontend/src/features/home/Menu.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

codecov · 2026-06-04T22:46:25Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.21%. Comparing base (0984839) to head (1ad024e).
⚠️ Report is 7 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #40781      +/-   ##
==========================================
+ Coverage   64.19%   64.21%   +0.02%     
==========================================
  Files        2666     2666              
  Lines      143991   143835     -156     
  Branches    33108    33080      -28     
==========================================
- Hits        92428    92358      -70     
+ Misses      49950    49871      -79     
+ Partials     1613     1606       -7

Flag	Coverage Δ
javascript	`67.86% <100.00%> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Adds two tests that cover the scenarios the original fix addressed: - Empty breakpoint object (first paint before viewport is measured) must render horizontal, not inline — regression guard for the flash bug. - Explicit md:false must render inline, validating the mobile layout path. Refactors the module-level antd Grid mock to use a jest.fn() indirection so individual tests can override useBreakpoint's return value. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

netlify · 2026-06-05T21:17:54Z

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	`1ad024e`
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/6a2358f6b31c550008a91ca8
😎 Deploy Preview	https://deploy-preview-40781--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

Prevents a visible layout flash in the top navigation on initial page load by accounting for Ant Design’s Grid.useBreakpoint() returning an empty screen map on first render, ensuring the desktop navbar renders horizontally on first paint.

Changes:

Introduce an isMd derived flag that treats screens.md === undefined as desktop to avoid an initial inline (vertical) render.
Update all screens.md-based navbar layout decisions (mode, right-menu alignment, submenu dropdown icon) to use isMd.
Add regression tests covering the “unmeasured breakpoints” initial render and the explicit mobile (md: false) case.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
superset-frontend/src/features/home/Menu.tsx	Switch navbar layout logic to an `isMd` guard that avoids first-paint breakpoint uncertainty causing a layout flash.
superset-frontend/src/features/home/Menu.test.tsx	Improve breakpoint mocking and add tests to lock in the no-flash behavior for the initial `{}` breakpoint state and mobile behavior.

 jest.mock('antd', () => ({
  ...jest.requireActual('antd'),
  Grid: {
    ...jest.requireActual('antd').Grid,
-    useBreakpoint: () => ({ md: true }),
+    useBreakpoint: () => mockUseBreakpoint(),


bito-code-review · 2026-06-05T23:20:38Z

The suggestion to reuse the antd reference is correct. Calling jest.requireActual('antd') multiple times in the factory can lead to redundant module resolution and potential inconsistencies. Storing the result in a variable before the jest.mock call is a cleaner and more efficient approach.

superset-frontend/src/features/home/Menu.test.tsx

const antd = jest.requireActual('antd');

jest.mock('antd', () => ({
  ...antd,
  Grid: {
    ...antd.Grid,
    useBreakpoint: () => mockUseBreakpoint(),
  },
}));

bito-code-review · 2026-06-06T00:19:16Z

Code Review Agent Run #9f4687

Actionable Suggestions - 0

Review Details

Files reviewed - 1 · Commit Range: 115f629..1ad024e
- superset-frontend/src/features/home/Menu.test.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

pull-request-size Bot added the size/XS label Jun 4, 2026

dosubot Bot added change:frontend Requires changing the frontend home:design Related to the Homepage UI/UX labels Jun 4, 2026

pull-request-size Bot added size/M and removed size/XS labels Jun 5, 2026

Merge branch 'master' into fix-nav-bar-layout-flash

1ad024e

yousoph requested a review from Copilot June 5, 2026 23:17

Copilot started reviewing on behalf of yousoph June 5, 2026 23:17 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

Comment thread superset-frontend/src/features/home/Menu.test.tsx

Comment on lines 35 to +39

jest.mock('antd', () => ({

...jest.requireActual('antd'),

Grid: {

...jest.requireActual('antd').Grid,

useBreakpoint: () => ({ md: true }),

useBreakpoint: () => mockUseBreakpoint(),

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(nav): prevent top navbar from flashing to vertical layout on load#40781

fix(nav): prevent top navbar from flashing to vertical layout on load#40781
aminghadersohi wants to merge 3 commits into
apache:masterfrom
aminghadersohi:fix-nav-bar-layout-flash

aminghadersohi commented Jun 4, 2026

Uh oh!

bito-code-review Bot commented Jun 4, 2026 •

edited

Loading

Code Review Agent Run #706786

Uh oh!

codecov Bot commented Jun 4, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

bito-code-review Bot commented Jun 5, 2026

Uh oh!

bito-code-review Bot commented Jun 6, 2026 •

edited

Loading

Code Review Agent Run #9f4687

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

aminghadersohi commented Jun 4, 2026

Summary

Testing

Checklist

Uh oh!

bito-code-review Bot commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #706786

Uh oh!

codecov Bot commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

netlify Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for superset-docs-preview ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

bito-code-review Bot commented Jun 5, 2026

Uh oh!

bito-code-review Bot commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #9f4687

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bito-code-review Bot commented Jun 4, 2026 •

edited

Loading

codecov Bot commented Jun 4, 2026 •

edited

Loading

netlify Bot commented Jun 5, 2026 •

edited

Loading

bito-code-review Bot commented Jun 6, 2026 •

edited

Loading