fix(clerk-js): Add background color to <PricingTableMatrix /> component (#5417)

Author: alexcarpenter

.changeset/sad-feet-fail.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add background color to `<PricingTableMatrix />` elements to ensure sticky elements cover the scrollable content.

packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

@@ -72,15 +72,16 @@ export function PricingTableMatrix({
     <InternalThemeProvider>
       <Box
         elementDescriptor={descriptors.pricingTableMatrixRoot}
-        sx={{
+        sx={t => ({
           position: 'relative',
           minWidth: '100%',
           display: 'grid',
           isolation: 'isolate',
+          backgroundColor: t.colors.$colorBackground,
           [mqu.md]: {
             overflowX: 'auto',
           },
-        }}
+        })}
       >
         <Box
           elementDescriptor={descriptors.pricingTableMatrixTable}
@@ -92,9 +93,11 @@ export function PricingTableMatrix({
             sx={t => ({
               position: 'sticky',
               top: 0,
+              backgroundColor: t.colors.$colorBackground,
               borderBottomWidth: t.borderWidths.$normal,
               borderBottomStyle: t.borderStyles.$solid,
               borderBottomColor: t.colors.$neutralAlpha100,
+              zIndex: 1,
             })}
           >
             <Box