fix(dashboard): prevent tab content cutoff and excessive whitespace in empty tabs

[richardfogaca]

SUMMARY

Fixes a bug where new dashboard tabs would show their content as cut off at the bottom. This was caused by tabs not filling the full available height, resulting in content being clipped outside the visible area.

The fix introduces a fullHeight prop to the Tabs component that cascades height: 100% through the tab hierarchy (.ant-tabs → .ant-tabs-content-holder → .ant-tabs-content → .ant-tabs-tabpane). This ensures tabs expand to fill their container's height while maintaining proper layout.

Additionally, it updates the DashboardEmptyStateContainer to use flexbox centering while preserving position: absolute to prevent excessive whitespace in empty tabs.

Changes:

• Added fullHeight prop to Tabs component in superset-ui-core
• Applied fullHeight to both top-level and nested dashboard tabs
• Changed height: inherit to height: 100% in DashboardBuilder for the ParentSize wrapper
• Added flexbox centering to DashboardEmptyStateContainer while keeping absolute positioning

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE: New dashboard tabs showed content cut off at the bottom, requiring scrolling to see full content

AFTER: Dashboard tabs now properly fill available height, with content fully visible and no excessive whitespace in empty tabs

TESTING INSTRUCTIONS

1. Navigate to any dashboard
2. Click "Edit dashboard"
3. Click "Add tab" to create a new empty tab
4. Save
5. Verify the empty state message is centered and there's no excessive blank space below
6. Switch to existing tabs with content
7. Verify all charts and components are fully visible without being cut off
8. Verify no excessive scrolling is required to see content

ADDITIONAL INFORMATION

• Changes UI

[bito-code-review]

Code Review Agent Run #b5f936

Actionable Suggestions - 0

Review Details

• Files reviewed - 5 · Commit Range: 3fc12a5..3fc12a5

  • superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.tsx
  • superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
  • superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
  • superset-frontend/src/dashboard/components/DashboardGrid.jsx
  • superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.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 Default Agent You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	ParentSize height reference may break chart rendering ▹ view

Files scanned

​

File Path	Reviewed
superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.tsx	✅
superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.tsx	✅
superset-frontend/src/dashboard/components/DashboardGrid.jsx	✅
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx	✅
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[bito-code-review]

Interaction Diagram by Bito

sequenceDiagram
participant DB as DashboardBuilder<br/>🔄 Updated | ●●○ Medium
participant DC as DashboardContainer<br/>🔄 Updated | ●●○ Medium
participant Tabs as Tabs Component<br/>🔄 Updated | ●●● High
participant TR as TabsRenderer<br/>🔄 Updated | ●●○ Medium
participant DG as DashboardGrid<br/>🔄 Updated | ●●○ Medium
participant DOM as DOM/Browser Rendering
Note over Tabs: fullHeight prop added to enable<br/>100% height CSS styling
DB->>DC: Render DashboardContainer
DC->>Tabs: Pass fullHeight prop
Tabs->>TR: Propagate fullHeight config
TR->>DOM: Render tabs with height: 100%
DG->>DOM: Render empty state with flex centering
DOM-->>DB: Responsive tab layout

Loading

Critical path: DashboardBuilder -> DashboardContainer -> Tabs Component -> TabsRenderer -> DOM/Browser Rendering

Note: The diff introduces a fullHeight prop to the Tabs component to enable proper CSS height inheritance for dashboard tab containers. DashboardContainer now passes this prop through to Tabs and TabsRenderer, enabling full-height rendering of tab content. Additionally, DashboardGrid and DashboardBuilder receive styling updates for proper layout alignment.