From f8a3693bb6923074b5f65376575236bd3fda7624 Mon Sep 17 00:00:00 2001
From: Marcus Farrell <marcusljf@gmail.com>
Date: Thu, 27 Nov 2025 08:44:28 -0800
Subject: [PATCH 1/2] Add padding to usage chart selector

Added 'px-4' class to the selector component in the UsageChart to improve horizontal padding and layout consistency.
---
 .../(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx
index 91726e4dd03..d030319cc02 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx
@@ -359,6 +359,7 @@ export function UsageChart() {
               onSelect={onSelect}
               onRemove={onRemove}
               onRemoveAll={onRemoveAll}
+              className="px-4"
             />
           )}
         </AnimatedSizeContainer>

From 6926db97e64a4f6f97610381593f8b1e7c5f1838 Mon Sep 17 00:00:00 2001
From: Marcus Farrell <marcusljf@gmail.com>
Date: Thu, 27 Nov 2025 10:50:04 -0800
Subject: [PATCH 2/2] Adjust padding for responsive layout in usage chart

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.
---
 .../(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx
index d030319cc02..6fc667f4aa0 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx
@@ -324,7 +324,7 @@ export function UsageChart() {
   return (
     <div className="space-y-4 pt-4 sm:pt-8">
       <div className="flex flex-col gap-3">
-        <div className="flex flex-col gap-2 px-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-col gap-2 px-4 md:flex-row md:items-center md:justify-between md:px-0">
           <div className="flex w-full flex-col gap-2 md:w-fit md:flex-row md:items-center">
             <Filter.Select
               className="h-9 w-full md:w-fit"
@@ -359,7 +359,7 @@ export function UsageChart() {
               onSelect={onSelect}
               onRemove={onRemove}
               onRemoveAll={onRemoveAll}
-              className="px-4"
+              className="px-4 md:px-0"
             />
           )}
         </AnimatedSizeContainer>