Problem on Dropdown Broken layout in ReactJS

Question

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

Pls check my code sandbox 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;
`;

Answer 1

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;
`;