Skip to content

App-792: standardize canvas widget card padding, title typography, and borders#9014

Open
Di7design wants to merge 3 commits intomainfrom
di-rill/standardize-canvas-widget-padding
Open

App-792: standardize canvas widget card padding, title typography, and borders#9014
Di7design wants to merge 3 commits intomainfrom
di-rill/standardize-canvas-widget-padding

Conversation

@Di7design
Copy link

  • All canvas widget cards now own their own padding (p-4) via CanvasComponent, eliminating inconsistent per-widget padding
  • Title typography standardized to 16px semibold with leading-none across all widgets via ComponentHeader
  • Card border radius changed to rounded-[6px], outline replaced with border + shadow for cleaner card appearance
  • All widget layout containers (CanvasChart, LeaderboardDisplay, CanvasPivotDisplay) now follow a uniform size-full flex flex-col gap-y-4 pattern for consistent 16px gap between title and content
  • Removed redundant per-component padding from CanvasPivotRenderer and VegaLiteRenderer
  • Set padding: 0 in Vega config for canvas dashboards to eliminate Vega-Lite's default internal 5px padding, aligning Y-axis labels with card titles

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

Developed in collaboration with Claude Code

Di7design and others added 3 commits March 10, 2026 16:32
…ally

- CanvasComponent: card owns all padding (p-4), border radius rounded-[6px], border+shadow replaces outline
- ComponentHeader: title 16px semibold leading-none, no self-padding (card provides it)
- CanvasChart/LeaderboardDisplay/CanvasPivotDisplay: uniform size-full flex-col gap-y-4 layout
- CanvasPivotRenderer: remove self-padding (card provides it)
- VegaLiteRenderer: remove extra px-2 on canvas dashboards
- vega-config: set padding:0 for canvas dashboards to eliminate Vega's default internal padding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@Di7design Di7design requested a review from ericpgreen2 March 11, 2026 22:59
@Di7design Di7design marked this pull request as ready for review March 11, 2026 23:00
@Di7design Di7design changed the title feat: standardize canvas widget card padding, title typography, and borders App-792 feat: standardize canvas widget card padding, title typography, and borders Mar 11, 2026
@Di7design Di7design changed the title App-792 feat: standardize canvas widget card padding, title typography, and borders App-792: standardize canvas widget card padding, title typography, and borders Mar 11, 2026
@ericpgreen2 ericpgreen2 requested review from djbarnwal and removed request for ericpgreen2 March 12, 2026 08:38
@ericpgreen2
Copy link
Contributor

Tagging @djbarnwal for the code review, since he's the main maintainer for these components

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants