Pseudo-Elements not working properly on Mui table head and Mui table row but working fine in windows browsers

i am giving background color and border color with border radius to mui table head and mui table row.
it looks fine in windows and android all browsers but seems like position not working in mac and iphone system.
i am adding windows chrome view and safari browser view.
i setup the code on code sandbox so you can see issue by opening link in windows chrome and safari mac os.
for debugging purpose i apply same css on mui box and it was working fine in safari also. seems like issue with using Pseudo-elements positions.
i want this with Pseudo-elements method. i ll be very thankful to you if you resolve this issue.
windows chrome browser view
safari browser view
background color and border is targetting table tag instead of staying inside thier parent relative.
here is code sandbox link
https://codesandbox.io/p/sandbox/silent-dream-txtxrl?file=%2Fsrc%2FDemo.tsx