chore: Improve transition

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/CreditGrants.vue

@@ -51,7 +51,7 @@ const getCategoryConfig = category =>
 </script>
 
 <template>
-  <div class="mt-4">
+  <div class="mt-4 max-h-96 overflow-y-auto">
     <h6 class="text-base font-semibold mb-2">
       {{ t('BILLING_SETTINGS_V2.CREDIT_GRANTS.TITLE') }}
     </h6>

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/CreditsSection.vue

@@ -82,7 +82,7 @@ const handleRefresh = () => {
     />
 
     <div
-      class="transition-all duration-500 ease-in-out grid overflow-hidden mx-5 !mt-0"
+      class="transition-all duration-300 ease-out grid overflow-hidden mx-5 !mt-0"
       :class="
         showTopupOptions
           ? 'grid-rows-[1fr] opacity-100'
@@ -108,7 +108,7 @@ const handleRefresh = () => {
     </div>
 
     <div
-      class="transition-all duration-500 ease-in-out grid overflow-hidden mx-5 !mt-0"
+      class="transition-all duration-300 ease-out grid overflow-hidden mx-5 !mt-0"
       :class="
         showCreditHistory
           ? 'grid-rows-[1fr] opacity-100'

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/PricingPlans.vue

@@ -258,7 +258,7 @@ const handleUpdateSeats = async ({ quantity, direction }) => {
       />
 
       <div
-        class="transition-all duration-500 ease-in-out grid overflow-hidden mx-5 !mt-0"
+        class="transition-all duration-300 ease-out grid overflow-hidden mx-5 !mt-0"
         :class="
           !hasActiveSubscription || showAllPlans
             ? 'grid-rows-[1fr] opacity-100'