Problem on Dropdown Broken layout in ReactJS-CodePudding

I have a dropdown in my react app using styled components. It works just as I expected on google chrome on windows. It should on the top of the ellipsis button and some space to its right. The problem is on the safari, its being cut out to the right?

Pls check my codesandbox here cLICK HERE

const DropdownMenu = styled.span`
  border-radius: 8px;
  display: ${({ show }) => (show ? "block" : "none")};
  position: absolute;
  background-color: #ffffff;
  width: 141px;
  height: 100px;
  filter: drop-shadow(0 7px 7px #00000029);
  z-index: 1;
  margin-bottom: 10rem;
  margin-right: 5rem;
`;

CodePudding user response：

I Forked your Sandbox and edited some of your properties. Now it works also on Safari. See: https://codesandbox.io/s/open-specific-menu-in-reactjs-forked-4spdp?file=/src/Form.js

I gave the Dropdown a position relative to the button (bottom: 100%; and right: 0). Now it knows where it should be.

const ButtonSection = styled.div`
  ...
  position: relative;
`;

const DropdownMenu = styled.span`
  ...
  bottom: 100%;
  right: 0;
`;