From 51f90bf450aa8294602bb1d4e2aa7eb4bd48c0cc Mon Sep 17 00:00:00 2001 From: Rotimi Best Date: Sun, 12 Jul 2026 17:54:11 +0100 Subject: [PATCH] fix(dashboard): make upgrade plan modal mobile responsive (#736) * fix(dashboard): make upgrade plan modal mobile responsive - Constrain modal height and enable scrolling on small screens - Anchor modal near top on mobile instead of vertical centering - Stack success-state buttons and use full-width cards in the grid - Reduce pricing card padding and adjust toggle badge on narrow viewports Co-authored-by: Rotimi Best * chore(ui): regenerate output.css for pricing responsive classes Co-authored-by: Rotimi Best --------- Co-authored-by: Cursor Agent Co-authored-by: Rotimi Best --- .../src/lib/features/ui/upgrade-modal.svelte | 24 ++++++++++++------- .../custom/pricing-card/pricing-card.svelte | 4 ++-- .../pricing-toggle/pricing-toggle.svelte | 4 ++-- packages/ui/src/output.css | 2 +- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/apps/dashboard/src/lib/features/ui/upgrade-modal.svelte b/apps/dashboard/src/lib/features/ui/upgrade-modal.svelte index 8f62d433..e2934713 100644 --- a/apps/dashboard/src/lib/features/ui/upgrade-modal.svelte +++ b/apps/dashboard/src/lib/features/ui/upgrade-modal.svelte @@ -101,22 +101,27 @@ {/if} - + {$t('pricing.modal.heading')} {#if upgraded} -
+
-

{$t('pricing.modal.thanks')}

+

{$t('pricing.modal.thanks')}

{$t('pricing.modal.plan')}

-
- -
@@ -128,8 +133,8 @@
{:else} -
-
+
+
-
+
{#each planNames as planName} {@const plan = PLANS[planName]} {@const isPopular = planName === 'EARLY_ADOPTER'} @@ -148,6 +153,7 @@ {isYearlyPlan} {isLoadingPlan} {handleClick} + className="w-full max-w-none!" popularLabel={$t('pricing.modal.popular')} perOrgLabel={$t('pricing.modal.per_org')} /> diff --git a/packages/ui/src/custom/pricing-card/pricing-card.svelte b/packages/ui/src/custom/pricing-card/pricing-card.svelte index 16cc2f0f..44df8143 100644 --- a/packages/ui/src/custom/pricing-card/pricing-card.svelte +++ b/packages/ui/src/custom/pricing-card/pricing-card.svelte @@ -39,7 +39,7 @@
@@ -71,7 +71,7 @@ {#snippet children(isHovered: boolean)}