Modify layout and improve subscription fetching

The layout for responsive designs has been updated in plan-picker component. Subscription type has been removed from billing/page.tsx and subscription fetching has been improved with additional query parameters in both billing/page.tsx and current-plan-card.tsx. Errors were also corrected in i18n translation keys in team-account-checkout-form.tsx. CurrentPlanCard's component props now includes line items in the subscription object. Changes in billing/page.tsx include adaptation of container width to be fully responsive.

apps/web/app/(dashboard)/home/[account]/billing/page.tsx

@@ -35,6 +35,7 @@ async function TeamAccountBillingPage({ params }: Params) {
   const workspace = await loadTeamWorkspace(params.account);
   const accountId = workspace.account.id;
   const [subscription, customerId] = await loadAccountData(accountId);
+
   const canManageBilling =
     workspace.account.permissions.includes('billing.manage');
 
@@ -46,7 +47,7 @@ async function TeamAccountBillingPage({ params }: Params) {
       />
 
       <PageBody>
-        <div className={'mx-auto w-full max-w-2xl'}>
+        <div className={'mx-auto w-full'}>
           <If condition={!canManageBilling}>
             <CannotManageBillingAlert />
           </If>
@@ -100,7 +101,7 @@ async function loadAccountData(accountId: string) {
 
   const subscription = client
     .from('subscriptions')
-    .select('*')
+    .select('*, items: subscription_items !inner (*)')
     .eq('account_id', accountId)
     .maybeSingle()
     .then(({ data }) => data);