Show tooltip for deleting a credit card that is currently active (supabase#31242)

Author: joshenlim

apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/CreditCard.tsx

@@ -1,5 +1,6 @@
 import { MoreHorizontal } from 'lucide-react'
 
+import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
 import { OrganizationPaymentMethod } from 'data/organizations/organization-payment-methods-query'
 import { BASE_PATH } from 'lib/constants'
 import {
@@ -62,7 +63,7 @@ const CreditCard = ({
         {isExpired && <Badge variant="destructive">Expired</Badge>}
         {isActive && <Badge variant="brand">Active</Badge>}
 
-        {canUpdatePaymentMethods && !isActive && (
+        {canUpdatePaymentMethods && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
@@ -72,8 +73,8 @@ const CreditCard = ({
                 aria-label="More options"
               />
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {paymentMethodType === 'card' && (
+            <DropdownMenuContent align="end" className="w-36">
+              {paymentMethodType === 'card' && !isActive && (
                 <>
                   <DropdownMenuItem
                     key="make-default"
@@ -84,12 +85,20 @@ const CreditCard = ({
                   <DropdownMenuSeparator />
                 </>
               )}
-              <DropdownMenuItem
+              <DropdownMenuItemTooltip
                 key="delete-method"
+                disabled={isActive}
+                className="!pointer-events-auto"
                 onClick={() => setSelectedMethodToDelete?.(paymentMethod)}
+                tooltip={{
+                  content: {
+                    side: 'left',
+                    text: isActive ? 'Unable to delete a card that is currently active' : undefined,
+                  },
+                }}
               >
                 <p>Delete card</p>
-              </DropdownMenuItem>
+              </DropdownMenuItemTooltip>
             </DropdownMenuContent>
           </DropdownMenu>
         )}

apps/studio/components/layouts/Scaffold.tsx

@@ -3,7 +3,7 @@ import { useAppStateSnapshot } from 'state/app-state'
 import { cn } from 'ui'
 
 export const MAX_WIDTH_CLASSES = 'mx-auto w-full max-w-[1200px]'
-export const PADDING_CLASSES = 'px-4 md:px-6 lg:px-14 xl:px-24 2xl:px-32'
+export const PADDING_CLASSES = 'px-4 md:px-6 lg:px-14 xl:px-24 2xl:px-28'
 export const MAX_WIDTH_CLASSES_COLUMN = 'min-w-[420px]'
 
 const ScaffoldHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(