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 <[email protected]>

* chore(ui): regenerate output.css for pricing responsive classes

Co-authored-by: Rotimi Best <[email protected]>

---------

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/features/ui/upgrade-modal.svelte

@@ -101,22 +101,27 @@
 {/if}
 
 <Dialog.Root bind:open onOpenChange={handleOpenChange}>
-  <Dialog.Content class="max-w-5xl! {upgraded || isConfirming ? 'max-w-[600px]!' : ''}">
+  <Dialog.Content
+    class="top-[4dvh]! max-h-[92dvh] w-[96vw] translate-y-0! overflow-y-auto p-4 sm:top-[50%]! sm:max-h-none sm:translate-y-[-50%]! sm:p-6 {upgraded ||
+    isConfirming
+      ? 'max-w-[min(600px,96vw)]!'
+      : 'max-w-5xl!'}"
+  >
     <Dialog.Header>
       <Dialog.Title>{$t('pricing.modal.heading')}</Dialog.Title>
     </Dialog.Header>
     {#if upgraded}
-      <div class="animate-icon flex w-full flex-col items-center justify-center gap-4">
+      <div class="animate-icon flex w-full flex-col items-center justify-center gap-4 px-1">
         <RocketIcon class="rocket-launch my-3 size-6" color="var(--primary)" />
-        <p class="text-lg">{$t('pricing.modal.thanks')}</p>
+        <p class="text-center text-lg">{$t('pricing.modal.thanks')}</p>
         <p class="ui:mb-4 ui:text-center">
           {$t('pricing.modal.plan')}
         </p>
-        <div class="flex items-center gap-4">
-          <Button variant="outline" onclick={onClose}>
+        <div class="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center">
+          <Button class="w-full sm:w-auto" variant="outline" onclick={onClose}>
             {$t('pricing.modal.close')}
           </Button>
-          <Button variant="default" onclick={onLearnMore}>
+          <Button class="w-full sm:w-auto" variant="default" onclick={onLearnMore}>
             {$t('pricing.modal.learn')}
           </Button>
         </div>
@@ -128,8 +133,8 @@
         </div>
       </div>
     {:else}
-      <div class="flex h-full flex-col items-center justify-center">
-        <div class="ui:mb-6">
+      <div class="flex flex-col items-center">
+        <div class="ui:mb-4 ui:w-full ui:max-w-sm ui:px-2 ui:sm:mb-6 ui:sm:max-w-none ui:sm:px-4">
           <PricingToggle
             bind:isYearly={isYearlyPlan}
             monthlyLabel={$t('pricing.modal.monthly')}
@@ -137,7 +142,7 @@
             saveLabel={$t('pricing.modal.save')}
           />
         </div>
-        <div class="mt-6 grid w-full grid-cols-1 gap-6 overflow-y-auto p-2 md:grid-cols-3 md:overflow-y-visible">
+        <div class="grid w-full grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
           {#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')}
             />

packages/ui/src/custom/pricing-card/pricing-card.svelte

@@ -39,7 +39,7 @@
 
 <div
   class={cn(
-    'ui:relative ui:flex ui:max-w-sm ui:flex-col ui:rounded-lg ui:border ui:border-border ui:bg-card ui:p-8',
+    'ui:relative ui:flex ui:max-w-sm ui:flex-col ui:rounded-lg ui:border ui:border-border ui:bg-card ui:p-4 ui:sm:p-8',
     className
   )}
 >
@@ -71,7 +71,7 @@
       {#snippet children(isHovered: boolean)}
         <Button
           variant={isPopular ? 'default' : 'outline'}
-          class="ui:w-full ui:py-4 ui:text-base ui:transition-all"
+          class="ui:w-full ui:py-3 ui:text-base ui:transition-all ui:sm:py-4"
           disabled={isDisabled || isLoading}
           loading={isLoading}
           onclick={() => {

packages/ui/src/custom/pricing-toggle/pricing-toggle.svelte

@@ -37,7 +37,7 @@
 {/snippet}
 
 <div
-  class="ui:relative ui:z-10 ui:flex ui:items-center ui:rounded-full ui:border ui:p-1 ui:bg-white ui:dark:bg-slate-950 ui:dark:border-slate-800"
+  class="ui:relative ui:z-10 ui:mx-auto ui:flex ui:w-fit ui:max-w-full ui:items-center ui:rounded-full ui:border ui:p-1 ui:bg-white ui:dark:bg-slate-950 ui:dark:border-slate-800"
 >
   {@render period_button(!isYearly, true)}
 
@@ -48,7 +48,7 @@
       {#snippet children(isHovered)}
         <Badge
           variant="default"
-          class="ui:absolute ui:-top-3 ui:-right-4 ui:rotate-5 ui:shadow-2xl ui:bg-linear-to-r ui:from-pink-500 ui:to-orange-500 ui:px-2 ui:py-0.5"
+          class="ui:absolute ui:-top-3 ui:right-0 ui:rotate-5 ui:shadow-2xl ui:bg-linear-to-r ui:from-pink-500 ui:to-orange-500 ui:px-2 ui:py-0.5 ui:sm:-right-4"
         >
           <PremiumIcon size={8} {isHovered} class="ui:text-white! ui:mr-1" />
           <span class="ui:text-[10px] ui:font-bold ui:text-white">{saveLabel}</span>