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]>

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>