Skip to content

Commit a2dff71

Browse files
graycyrusgraycyrus
authored
fix(settings): normalize padding across all settings panels (tinyhumansai#362)
Remove max-w-md mx-auto constraints from BillingPanel, RecoveryPhrasePanel, TeamPanel, TeamMembersPanel, TeamInvitesPanel, and TeamManagementPanel so all panels use consistent p-4 padding matching ConnectionsPanel and the other baseline panels.
1 parent c036b75 commit a2dff71

6 files changed

Lines changed: 134 additions & 141 deletions

File tree

‎app/src/components/settings/panels/BillingPanel.tsx‎

Lines changed: 129 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -374,131 +374,144 @@ const BillingPanel = () => {
374374
/>
375375

376376
<div className="overflow-y-auto">
377-
<div className="space-y-2">
378-
<div className="max-w-md mt-4 mx-auto px-4 space-y-3">
379-
{/* ── Current Plan Header ───────────────────────────────── */}
380-
<div className="rounded-2xl border border-stone-200 bg-white p-3">
381-
<div className="flex items-center justify-between mb-1.5">
382-
<h3 className="text-sm font-semibold text-stone-900">
383-
Current Plan — {currentTier}
384-
</h3>
385-
{hasActive && (
386-
<button
387-
onClick={handleManageSubscription}
388-
className="text-xs text-primary-400 hover:text-primary-300 font-medium transition-colors">
389-
Manage
390-
</button>
391-
)}
392-
</div>
393-
{planExpiry && (
394-
<p className="text-xs text-stone-400 mb-1.5">
395-
Renews{' '}
396-
{new Date(planExpiry).toLocaleDateString('en-US', {
397-
month: 'long',
398-
day: 'numeric',
399-
year: 'numeric',
400-
})}
401-
</p>
402-
)}
403-
<p className="text-xs text-stone-500">
404-
Your subscription includes premium usage each cycle. Pay-as-you-go credits cover
405-
overage after the included budget is consumed.
406-
</p>
407-
{currentPlan && (
408-
<div className="mt-2 flex flex-wrap gap-1.5">
409-
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
410-
Included monthly value: {formatUsdAmount(currentPlan.monthlyBudgetUsd)}
411-
</span>
412-
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
413-
7-day cycle budget: {formatUsdAmount(currentPlan.weeklyBudgetUsd)}
414-
</span>
415-
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
416-
5-hour cap: {formatUsdAmount(currentPlan.fiveHourCapUsd)}
417-
</span>
418-
{currentPlanMeta && (
419-
<>
420-
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
421-
Premium-usage discount: {currentPlanMeta.discountPercent}%
422-
</span>
423-
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
424-
Storage: {formatStorageLimit(currentPlanMeta.storageLimitBytes)}
425-
</span>
426-
</>
427-
)}
428-
</div>
377+
<div className="p-4 space-y-3">
378+
{/* ── Current Plan Header ───────────────────────────────── */}
379+
<div className="rounded-2xl border border-stone-200 bg-white p-3">
380+
<div className="flex items-center justify-between mb-1.5">
381+
<h3 className="text-sm font-semibold text-stone-900">Current Plan — {currentTier}</h3>
382+
{hasActive && (
383+
<button
384+
onClick={handleManageSubscription}
385+
className="text-xs text-primary-400 hover:text-primary-300 font-medium transition-colors">
386+
Manage
387+
</button>
429388
)}
430389
</div>
431-
432-
{/* ── Pay as You Go ── PROMOTED TO TOP ─────────────────── */}
433-
<PayAsYouGoCard
434-
creditBalance={creditBalance}
435-
isLoadingCredits={isLoadingCredits}
436-
isToppingUp={isToppingUp}
437-
onTopUp={handleTopUp}
438-
onBalanceRefresh={handleBalanceRefresh}
439-
/>
390+
{planExpiry && (
391+
<p className="text-xs text-stone-400 mb-1.5">
392+
Renews{' '}
393+
{new Date(planExpiry).toLocaleDateString('en-US', {
394+
month: 'long',
395+
day: 'numeric',
396+
year: 'numeric',
397+
})}
398+
</p>
399+
)}
400+
<p className="text-xs text-stone-500">
401+
Your subscription includes premium usage each cycle. Pay-as-you-go credits cover
402+
overage after the included budget is consumed.
403+
</p>
404+
{currentPlan && (
405+
<div className="mt-2 flex flex-wrap gap-1.5">
406+
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
407+
Included monthly value: {formatUsdAmount(currentPlan.monthlyBudgetUsd)}
408+
</span>
409+
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
410+
7-day cycle budget: {formatUsdAmount(currentPlan.weeklyBudgetUsd)}
411+
</span>
412+
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
413+
5-hour cap: {formatUsdAmount(currentPlan.fiveHourCapUsd)}
414+
</span>
415+
{currentPlanMeta && (
416+
<>
417+
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
418+
Premium-usage discount: {currentPlanMeta.discountPercent}%
419+
</span>
420+
<span className="rounded-full border border-stone-200 bg-stone-50 px-2 py-1 text-[10px] text-stone-600">
421+
Storage: {formatStorageLimit(currentPlanMeta.storageLimitBytes)}
422+
</span>
423+
</>
424+
)}
425+
</div>
426+
)}
440427
</div>
441428

429+
{/* ── Pay as You Go ── PROMOTED TO TOP ─────────────────── */}
430+
<PayAsYouGoCard
431+
creditBalance={creditBalance}
432+
isLoadingCredits={isLoadingCredits}
433+
isToppingUp={isToppingUp}
434+
onTopUp={handleTopUp}
435+
onBalanceRefresh={handleBalanceRefresh}
436+
/>
437+
442438
{/* ── Divider ──────────────────────────────────────────── */}
443-
<div className="flex items-center gap-3 px-4 py-2 max-w-md mx-auto">
439+
<div className="flex items-center gap-3 py-2">
444440
<div className="flex-1 h-px bg-stone-200" />
445441
<span className="text-xs text-stone-400 whitespace-nowrap">
446442
Or subscribe for included usage + discounts
447443
</span>
448444
<div className="flex-1 h-px bg-stone-200" />
449445
</div>
450446

451-
<div className="max-w-md mx-auto">
452-
{/* ── Subscription Plans ──────────────────────────────── */}
453-
<SubscriptionPlans
454-
currentTier={currentTier}
455-
billingInterval={billingInterval}
456-
setBillingInterval={setBillingInterval}
457-
paymentMethod={paymentMethod}
458-
setPaymentMethod={setPaymentMethod}
459-
isPurchasing={isPurchasing}
460-
purchasingTier={purchasingTier}
461-
paymentConfirmed={paymentConfirmed}
462-
onUpgrade={handleUpgrade}
463-
/>
464-
465-
{/* ── Inference Budget ────────────────────────────────── */}
466-
<div className="px-4 pt-2">
467-
<InferenceBudget teamUsage={teamUsage} isLoadingCredits={isLoadingCredits} />
468-
</div>
447+
{/* ── Subscription Plans ──────────────────────────────── */}
448+
<SubscriptionPlans
449+
currentTier={currentTier}
450+
billingInterval={billingInterval}
451+
setBillingInterval={setBillingInterval}
452+
paymentMethod={paymentMethod}
453+
setPaymentMethod={setPaymentMethod}
454+
isPurchasing={isPurchasing}
455+
purchasingTier={purchasingTier}
456+
paymentConfirmed={paymentConfirmed}
457+
onUpgrade={handleUpgrade}
458+
/>
459+
460+
{/* ── Inference Budget ────────────────────────────────── */}
461+
<div className="pt-2">
462+
<InferenceBudget teamUsage={teamUsage} isLoadingCredits={isLoadingCredits} />
463+
</div>
469464

470-
{/* ── Auto-Recharge + Payment Methods ────────────────── */}
471-
<AutoRechargeSection
472-
arSettings={arSettings}
473-
arLoading={arLoading}
474-
arError={arError}
475-
arSaving={arSaving}
476-
arThreshold={arThreshold}
477-
arAmount={arAmount}
478-
arWeeklyLimit={arWeeklyLimit}
479-
arDirty={arDirty}
480-
setArThreshold={setArThreshold}
481-
setArAmount={setArAmount}
482-
setArWeeklyLimit={setArWeeklyLimit}
483-
setArError={setArError}
484-
onArToggle={handleArToggle}
485-
onArSave={handleArSave}
486-
cards={cards}
487-
cardsLoading={cardsLoading}
488-
confirmDeleteId={confirmDeleteId}
489-
deletingCardId={deletingCardId}
490-
settingDefaultId={settingDefaultId}
491-
setConfirmDeleteId={setConfirmDeleteId}
492-
onSetDefault={handleSetDefault}
493-
onDeleteCard={handleDeleteCard}
494-
onAddCard={handleAddCard}
495-
/>
496-
497-
{/* ── Why upgrade? ───────────────────────────────────── */}
498-
<div className="px-4 pb-4 pt-2">
499-
<div className="rounded-xl bg-gradient-to-br from-primary-500/10 to-sage-500/10 border border-primary-500/20 p-4">
500-
<h3 className="text-sm font-semibold text-stone-900 mb-2">Why upgrade?</h3>
501-
<ul className="space-y-1.5 text-xs text-stone-600">
465+
{/* ── Auto-Recharge + Payment Methods ────────────────── */}
466+
<AutoRechargeSection
467+
arSettings={arSettings}
468+
arLoading={arLoading}
469+
arError={arError}
470+
arSaving={arSaving}
471+
arThreshold={arThreshold}
472+
arAmount={arAmount}
473+
arWeeklyLimit={arWeeklyLimit}
474+
arDirty={arDirty}
475+
setArThreshold={setArThreshold}
476+
setArAmount={setArAmount}
477+
setArWeeklyLimit={setArWeeklyLimit}
478+
setArError={setArError}
479+
onArToggle={handleArToggle}
480+
onArSave={handleArSave}
481+
cards={cards}
482+
cardsLoading={cardsLoading}
483+
confirmDeleteId={confirmDeleteId}
484+
deletingCardId={deletingCardId}
485+
settingDefaultId={settingDefaultId}
486+
setConfirmDeleteId={setConfirmDeleteId}
487+
onSetDefault={handleSetDefault}
488+
onDeleteCard={handleDeleteCard}
489+
onAddCard={handleAddCard}
490+
/>
491+
492+
{/* ── Why upgrade? ───────────────────────────────────── */}
493+
<div className="pt-2">
494+
<div className="rounded-xl bg-gradient-to-br from-primary-500/10 to-sage-500/10 border border-primary-500/20 p-4">
495+
<h3 className="text-sm font-semibold text-stone-900 mb-2">Why upgrade?</h3>
496+
<ul className="space-y-1.5 text-xs text-stone-600">
497+
<li className="flex items-start gap-2">
498+
<svg
499+
className="w-4 h-4 text-sage-400 flex-shrink-0 mt-0.5"
500+
fill="none"
501+
stroke="currentColor"
502+
viewBox="0 0 24 24">
503+
<path
504+
strokeLinecap="round"
505+
strokeLinejoin="round"
506+
strokeWidth={2}
507+
d="M5 13l4 4L19 7"
508+
/>
509+
</svg>
510+
<span>
511+
Higher tiers increase your premium-usage discount and included usage every cycle
512+
</span>
513+
</li>
514+
{currentTier === 'FREE' && (
502515
<li className="flex items-start gap-2">
503516
<svg
504517
className="w-4 h-4 text-sage-400 flex-shrink-0 mt-0.5"
@@ -513,32 +526,12 @@ const BillingPanel = () => {
513526
/>
514527
</svg>
515528
<span>
516-
Higher tiers increase your premium-usage discount and included usage every
517-
cycle
529+
Annual billing lowers the effective monthly price, and top-ups let you keep
530+
going when usage spikes
518531
</span>
519532
</li>
520-
{currentTier === 'FREE' && (
521-
<li className="flex items-start gap-2">
522-
<svg
523-
className="w-4 h-4 text-sage-400 flex-shrink-0 mt-0.5"
524-
fill="none"
525-
stroke="currentColor"
526-
viewBox="0 0 24 24">
527-
<path
528-
strokeLinecap="round"
529-
strokeLinejoin="round"
530-
strokeWidth={2}
531-
d="M5 13l4 4L19 7"
532-
/>
533-
</svg>
534-
<span>
535-
Annual billing lowers the effective monthly price, and top-ups let you keep
536-
going when usage spikes
537-
</span>
538-
</li>
539-
)}
540-
</ul>
541-
</div>
533+
)}
534+
</ul>
542535
</div>
543536
</div>
544537
</div>

‎app/src/components/settings/panels/RecoveryPhrasePanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ const RecoveryPhrasePanel = () => {
204204
<SettingsHeader title="Recovery Phrase" showBackButton onBack={navigateBack} />
205205

206206
<div>
207-
<div className="p-4 max-w-md mx-auto">
207+
<div className="p-4">
208208
{success ? (
209209
<div className="flex flex-col items-center justify-center gap-3 py-12">
210210
<div className="w-12 h-12 rounded-full bg-sage-500/20 flex items-center justify-center">

‎app/src/components/settings/panels/TeamInvitesPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ const TeamInvitesPanel = () => {
105105
<SettingsHeader title="Invites" showBackButton={true} onBack={navigateBack} />
106106

107107
<div>
108-
<div className="max-w-md mx-auto p-4 space-y-4">
108+
<div className="p-4 space-y-4">
109109
{error && (
110110
<div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3">
111111
<p className="text-xs text-coral-400">{error}</p>

‎app/src/components/settings/panels/TeamManagementPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ const TeamManagementPanel = () => {
115115
<SettingsHeader title={`Manage ${team.name}`} showBackButton={true} onBack={navigateBack} />
116116

117117
<div>
118-
<div className="max-w-md mx-auto p-4 space-y-4">
118+
<div className="p-4 space-y-4">
119119
{/* Team Info */}
120120
<div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
121121
<div className="flex items-center gap-3 mb-3">

‎app/src/components/settings/panels/TeamMembersPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const TeamMembersPanel = () => {
117117
<SettingsHeader title="Members" showBackButton={true} onBack={navigateBack} />
118118

119119
<div>
120-
<div className="max-w-md mx-auto p-4 space-y-3">
120+
<div className="p-4 space-y-3">
121121
{error && (
122122
<div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3">
123123
<p className="text-xs text-coral-400">{error}</p>

‎app/src/components/settings/panels/TeamPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ const TeamPanel = () => {
235235
<SettingsHeader title="Team" showBackButton={true} onBack={navigateBack} />
236236

237237
<div>
238-
<div className="max-w-md mx-auto p-4 space-y-4">
238+
<div className="p-4 space-y-4">
239239
{/* Error banner */}
240240
{error && (
241241
<div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3">

0 commit comments

Comments
 (0)