Merge pull request #2711 from appwrite/fix-dat-975

Author: ItzNotABug

src/lib/components/cardGrid.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Divider, Layout, Card, Typography } from '@appwrite.io/pink-svelte';
 
+    export let overflow = true;
     export let hideFooter = false;
     export let gap: 'none' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' = 'l';
 </script>
@@ -16,7 +17,7 @@
                     </Typography.Text>
                 {/if}
             </Layout.Stack>
-            <div style:overflow="visible">
+            <div style:overflow={overflow ? 'visible' : 'hidden'}>
                 <Layout.Stack {gap}>
                     <slot name="aside" />
                 </Layout.Stack>

src/routes/(console)/account/payments/paymentMethods.svelte

@@ -51,15 +51,15 @@
     $: hasPaymentError = filteredMethods.some((method) => method?.lastError || method?.expired);
 </script>
 
-<CardGrid>
+<CardGrid overflow={false}>
     <svelte:fragment slot="title">Payment methods</svelte:fragment>
     View or update your payment methods. These can be applied to any organizations you have created.
     <svelte:fragment slot="aside">
         {#if $paymentMethods?.total && filteredMethods?.length > 0}
             <Table.Root
                 let:root
                 columns={[
-                    { id: 'cc', width: 140 },
+                    { id: 'cc', width: { min: 225 } },
                     { id: 'name', width: { min: 140 } },
                     { id: 'expiry', width: 100 },
                     { id: 'status', width: 110, hide: !hasPaymentError },

src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte

@@ -85,7 +85,7 @@
     ]);
 </script>
 
-<CardGrid>
+<CardGrid overflow={false}>
     <svelte:fragment slot="title">Payment history</svelte:fragment>
     Transaction history for this organization. Download invoices for more details about your payments.
     <svelte:fragment slot="aside">

src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte

@@ -109,15 +109,15 @@
         backupPaymentMethod?.expired;
 </script>
 
-<CardGrid>
+<CardGrid overflow={false}>
     <svelte:fragment slot="title">Payment methods</svelte:fragment>
     View or update your organization payment methods here.
     <svelte:fragment slot="aside">
         {#if organization?.paymentMethodId}
             <Table.Root
                 let:root
                 columns={[
-                    { id: 'cc', width: { min: 155 } },
+                    { id: 'cc', width: { min: 225 } },
                     { id: 'name', width: { min: 140 } },
                     { id: 'expiry', width: { min: 75 } },
                     { id: 'status', width: { min: 110 }, hide: !hasPaymentError },