Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add padding to usage chart selector #3168

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
steven-tey merged 2 commits into from
Nov 27, 2025
Merged

Add padding to usage chart selector #3168

steven-tey merged 2 commits into from
Nov 27, 2025

Conversation

@marcusljf
Copy link
Collaborator

@marcusljf marcusljf commented Nov 27, 2025 •
edited by coderabbitai bot
Loading

Filters were wider than the main actions

Current

CleanShot 2025-11-27 at 08 43 36@2x

Update

CleanShot 2025-11-27 at 08 43 27@2x CleanShot 2025-11-27 at 10 49 43@2x

Summary by CodeRabbit

  • Style
    • Refined horizontal spacing and responsive padding in the usage chart filter area for a cleaner layout across screen sizes.
    • Ensured filter controls maintain consistent padding alignment between mobile and desktop views.

✏️ Tip: You can customize this high-level summary in your review settings.

@marcusljf
Add padding to usage chart selector
f8a3693 
Added 'px-4' class to the selector component in the UsageChart to improve horizontal padding and layout consistency.
@vercel
Copy link
Contributor

vercel bot commented Nov 27, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
dub Ready Ready Preview Nov 27, 2025 6:56pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 27, 2025 •
edited
Loading

Walkthrough

Updated horizontal padding in the usage chart: removed medium-screen container padding (md:px-0) on the wrapper and added className="px-4 md:px-0" to the Filter.List usage; changes are presentational only and do not alter logic or exports.

Changes

Cohort / File(s) Change Summary
Usage Chart styling
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx		 Adjusted wrapper classes to add md:px-0 and passed className="px-4 md:px-0" to Filter.List for responsive horizontal padding (presentation-only).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

  • Single-file, cosmetic CSS/class changes; no logic or API surface impacted.

Possibly related PRs

  • Stacked usage charts #3150 — Modifies the same usage-chart file; that PR implements chart layout changes (stacked/grouped charts) and is closely related to this file.

Suggested reviewers

  • steven-tey

Poem

🐰 I nudged some padding, soft and neat,
Filters snug where edges meet,
A hop, a tweak — the layout's kind,
Little space for peace of mind. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Add padding to usage chart selector' accurately describes the main change: adding responsive padding adjustments to a usage chart component's selector/filter controls.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch usage-chart-padding
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f8a3693 and 6926db9.

📒 Files selected for processing (1)
  • apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: build

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@marcusljf marcusljf reopened this Nov 27, 2025
@marcusljf
Adjust padding for responsive layout in usage chart
6926db9 
Updated padding classes in UsageChart component to improve layout on medium screens by removing horizontal padding in md breakpoint. This enhances alignment and consistency in the billing settings UI.
@steven-tey steven-tey merged commit 69d3e1f into main Nov 27, 2025
7 of 8 checks passed
@steven-tey steven-tey deleted the usage-chart-padding branch November 27, 2025 21:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@steven-tey steven-tey steven-tey approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@marcusljf @steven-tey