apache/superset

Inconsistent Default Padding for Different Charts

Closed

#31,033 opened on Nov 22, 2024

View on GitHubContributor guide
 (20 comments) (0 reactions) (1 assignee)TypeScript (17,291 forks)batch import
#bug:cosmeticcares:presetgood first issueviz:charts:barviz:charts:table

Repository metrics

Stars
 (72,837 stars)
PR merge metrics
 (Avg merge 31d 15h) (773 merged PRs in 30d)

Description

Bug description

Depending on the type selected, the Superset UI will display charts with different alignments. Ideally they would be centered inside the card. Currently the padding differs on both sides leading to more whitespace on the left or right.

For Example:

  1. Go to Dashboard
  2. Click + Chart
  3. Select Table
  4. Click + Chart
  5. Select Bar Chart

Screenshots/recordings

Screenshot 2024-11-19 at 11 37 05 AM

Superset version

4.1.0

Python version

3.11

Node version

Not applicable

Browser

Chrome

Additional context

No response

Checklist

  • I have searched Superset docs and Slack and didn't find a solution to my problem.
  • I have searched the GitHub issue tracker and didn't find a similar bug report.
  • I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

Contributor guide

Research direction
The padding inconsistency likely stems from CSS classes in the chart container components. Investigate the CSS files in the frontend/src/components directory, specifically any chart related components. Check if there are default padding styles applied differently per chart type. A fix would involve standardizing padding using a common CSS class or adjusting inline styles. The issue has 20 comments, some may contain hints about the root cause.
Tech stack
typescriptpythonhtmlcssreact
Domain
frontenddesign
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Basic CSSReact component stylingFamiliarity with Superset chart components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35