Skip to content

fix(dashboard): prevent PublishedLabel overlap in non-English languages #36877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
sadpandajoe merged 1 commit into from
Jan 8, 2026
Merged

fix(dashboard): prevent PublishedLabel overlap in non-English languages #36877

sadpandajoe merged 1 commit into from
Jan 8, 2026

Conversation

@tt-a1i
Copy link
Contributor

@tt-a1i tt-a1i commented Dec 31, 2025 •
edited
Loading

SUMMARY

Fixes the layout issue where the "Published"/"Draft" status label overlaps with the "Modified X ago" timestamp on dashboard cards when using non-English languages (German, Spanish, Russian, etc.).

Root Cause:
The CoverFooter component used flex-wrap: nowrap, which prevented the status label from wrapping to a new line when translated text was longer than English.

Solution:

  1. Changed flex-wrap from nowrap to wrap in CoverFooter
  2. Added row-gap for proper vertical spacing when content wraps
  3. Added min-width: 0 to CoverFooterLeft to override the default min-width: auto, allowing proper shrinking with overflow: hidden (standard flex ellipsis pattern used elsewhere in codebase)

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before (German - text overlapping):
before

After (expected behavior):
The status label will wrap to a new line when there's insufficient horizontal space, preventing overlap.

TESTING INSTRUCTIONS

  1. Change browser language to German, Spanish, or Russian
  2. Navigate to the Welcome/Home page with dashboard cards
  3. Verify that "Veröffentlicht" (German) or equivalent translated status labels no longer overlap with the timestamp
  4. Resize browser window to verify responsive wrapping behavior

ADDITIONAL INFORMATION

AI Assistance Disclosure

I used Codex to review the changes, sanity-check the implementation against existing patterns, and help spot potential edge cases.

@tt-a1i tt-a1i force-pushed the fix/published-label-overlap-36357 branch from 1808a89 to 29a9510 Compare December 31, 2025 12:53
@tt-a1i
fix(dashboard): prevent PublishedLabel overlap in non-English languages
3606a29 
Change CoverFooter flex-wrap from nowrap to wrap to allow the status
label to wrap to a new line when translated text is longer than English.

Add min-width: 0 to CoverFooterLeft to override the default min-width: auto,
allowing proper shrinking behavior with overflow: hidden.

Fixes apache#36357
@tt-a1i tt-a1i force-pushed the fix/published-label-overlap-36357 branch from 29a9510 to 3606a29 Compare December 31, 2025 13:19
@tt-a1i tt-a1i marked this pull request as ready for review December 31, 2025 13:27
@dosubot dosubot bot added the listview Namespace | Anything related to lists, such as Dashboards, Charts, Datasets, etc. label Dec 31, 2025
@bito-code-review
Copy link
Contributor

bito-code-review bot commented Dec 31, 2025 •
edited
Loading

Code Review Agent Run #a78e39

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: 3606a29..3606a29
    • superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.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 [email protected].

Documentation & Help

AI Code Review powered by Bito Logo

@rusackas rusackas requested a review from Copilot January 3, 2026 07:13
Copilot AI reviewed Jan 3, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a layout issue where status labels ("Published"/"Draft") overlap with timestamps on dashboard cards when using non-English languages with longer translations (German, Spanish, Russian, etc.). The fix enables proper text wrapping when there is insufficient horizontal space.

  • Changed flex-wrap from nowrap to wrap to allow wrapping behavior
  • Added row-gap for proper vertical spacing between wrapped rows
  • Added min-width: 0 to enable proper flex item shrinking with text ellipsis

@sadpandajoe sadpandajoe merged commit 337eb3b into apache:master Jan 8, 2026
75 of 121 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@sadpandajoe sadpandajoe sadpandajoe approved these changes

Assignees

No one assigned

Labels

listview Namespace | Anything related to lists, such as Dashboards, Charts, Datasets, etc. packages size/XS

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

PublishedLabel overlaps text on dashboard card when using non-English languages

2 participants

@tt-a1i @sadpandajoe