fix(DataTable): add position: relative to scrollable region (#4440)

* fix(DataTable): add position: relative to scrollable region

* chore: add changeset

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

.changeset/orange-geese-search.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update DataTable to avoid layout overflow when visually hidden selectors are used in Table headers

packages/react/src/internal/components/ScrollableRegion.tsx

@@ -7,6 +7,15 @@ type ScrollableRegionProps = React.PropsWithChildren<{
   className?: string
 }>
 
+const defaultStyles = {
+  // When setting overflow, we also set `position: relative` to avoid
+  // `position: absolute` items breaking out of the container and causing
+  // scrollabrs on the page. This can occur with common classes like `sr-only`
+  // and can cause difficult to track down layout issues
+  position: 'relative',
+  overflow: 'auto',
+}
+
 export function ScrollableRegion({'aria-labelledby': labelledby, children, ...rest}: ScrollableRegionProps) {
   const ref = React.useRef(null)
   const hasOverflow = useOverflow(ref)
@@ -19,7 +28,7 @@ export function ScrollableRegion({'aria-labelledby': labelledby, children, ...re
     : {}
 
   return (
-    <Box {...rest} {...regionProps} ref={ref} sx={{overflow: 'auto'}}>
+    <Box {...rest} {...regionProps} ref={ref} sx={defaultStyles}>
       {children}
     </Box>
   )