fix: Billing Contact UI Regression from by MUI Update (#9667)

* fix billing contact mui grid * Added changeset: Billing Contact UI Regression caused by MUI Update --------- Co-authored-by: Banks Nussman <[email protected]>
linode · Sep 13, 2023 · f1692a2 · f1692a2
1 parent e5ec3e3
commit f1692a2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/packages/manager/.changeset/pr-9667-fixed-1694576063628.md b/packages/manager/.changeset/pr-9667-fixed-1694576063628.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Billing Contact UI Regression caused by MUI Update ([#9667](https://github.com/linode/manager/pull/9667))
diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx
@@ -1,4 +1,3 @@
-import { Box } from 'src/components/Box';
 import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
 import countryData from 'country-region-data';
@@ -104,7 +103,7 @@ const ContactInformation = (props: Props) => {
     (_country) => _country.countryShortCode === country
   )?.countryName;
 
-  const sxBox = {
+  const sxGrid = {
     flex: 1,
     maxWidth: '100%',
     position: 'relative',
@@ -140,7 +139,7 @@ const ContactInformation = (props: Props) => {
             state ||
             zip ||
             country) && (
-            <Box sx={sxBox}>
+            <Grid sx={sxGrid}>
               {(firstName || lastName) && (
                 <StyledTypography
                   data-qa-contact-name
@@ -170,10 +169,9 @@ const ContactInformation = (props: Props) => {
                 {city && state && ','} {state} {zip}
               </StyledTypography>
               <StyledTypography>{countryName}</StyledTypography>
-            </Box>
+            </Grid>
           )}
-
-          <Box sx={sxBox}>
+          <Grid sx={sxGrid}>
             <StyledTypography
               data-qa-contact-email
               sx={{ wordBreak: 'break-all' }}
@@ -188,7 +186,7 @@ const ContactInformation = (props: Props) => {
                 <strong>Tax ID</strong> {taxId}
               </StyledTypography>
             )}
-          </Box>
+          </Grid>
         </Grid>
       </BillingPaper>
       <BillingContactDrawer