fix: [M3-9831] - Broken Payment Method Default Chip in the Make a Payment Drawer (#12101)

* fix default chip by removing unnessesary grid

* Added changeset: Broken Payment Method Default Chip in the Make a Payment Drawer

* remove default export

* remove extra styles

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

Author: bnussman-akamai

packages/manager/.changeset/pr-12101-fixed-1745467362526.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Broken Payment Method Default Chip in the Make a Payment Drawer ([#12101](https://github.com/linode/manager/pull/12101))

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentMethodCard.tsx

@@ -1,6 +1,5 @@
 import { Chip } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
-import Grid from '@mui/material/Grid2';
 import * as React from 'react';
 
 import {
@@ -83,56 +82,31 @@ export const PaymentMethodCard = (props: Props) => {
     return <Icon />;
   };
 
-  const sxVariant = {
-    flexShrink: 0,
-    paddingLeft: { sm: 1, xs: 0 },
-  };
-
-  const renderVariant = () => {
-    return is_default ? (
-      <Grid
-        sx={sxVariant}
-        size={{
-          md: 2,
-          xs: 3,
-        }}
-      >
-        <Chip component="span" label="DEFAULT" size="small" />
-      </Grid>
-    ) : null;
-  };
-
   return (
-    <Grid size={12}>
-      <SelectionCard
-        sxCardBase={{
-          flexWrap: 'nowrap',
-        }}
-        sxCardBaseHeading={{
-          flex: 'inherit',
-        }}
-        sxCardBaseIcon={{
-          justifyContent: 'center',
-          padding: 0,
-          width: 45,
-        }}
-        sxCardBaseSubheading={{
-          color: cardIsExpired ? theme.color.red : undefined,
-        }}
-        sxGrid={{
-          minWidth: '100%',
-          padding: 0,
-        }}
-        checked={id === paymentMethodId}
-        disabled={disabled}
-        heading={heading}
-        onClick={() => handlePaymentMethodChange(id, cardIsExpired)}
-        renderIcon={renderIcon}
-        renderVariant={renderVariant}
-        subheadings={[subHeading]}
-      />
-    </Grid>
+    <SelectionCard
+      checked={id === paymentMethodId}
+      disabled={disabled}
+      heading={heading}
+      onClick={() => handlePaymentMethodChange(id, cardIsExpired)}
+      renderIcon={renderIcon}
+      renderVariant={
+        is_default ? () => <Chip label="DEFAULT" size="small" /> : undefined
+      }
+      subheadings={[subHeading]}
+      sxCardBase={{
+        flexWrap: 'nowrap',
+      }}
+      sxCardBaseHeading={{
+        flex: 'inherit',
+      }}
+      sxCardBaseIcon={{
+        justifyContent: 'center',
+        padding: 0,
+        width: 45,
+      }}
+      sxCardBaseSubheading={{
+        color: cardIsExpired ? theme.color.red : undefined,
+      }}
+    />
   );
 };
-
-export default PaymentMethodCard;