I'm using MUI X Data Grid v5 ponents for the UI library in my React Js app.

I'm creating a custom edit and delete row inside the DataGrid/DataGridPro ponent.

The specification is to show edit and delete icons for the hovered row but not by adding a new column (not adding an action column). I found the example for a private dashboard here.

So if the user decreases the width of the browser, the edit and delete icons wouldn't be hidden instead it would hide the row as seen in the image below.

I made it here =/demo.js but I found some drawbacks below:

1. The Popper ponent is rendered on top of the DataGrid ponent

When our mouse cursor hovered the row that was not fully shown, the Popper ponent was shown like these images below.

I've tried to add the disablePortal={true} prop to the Popper ponent but it would make the Popper ponent rendered outside the row like this image below.

I also have tried to change the zIndex prop for the column header (became 1000), the row (became 10), and the pagination container (became 1000) of the DataGrid ponent also changed the zIndex prop of the Popper ponent (became 100) but still the Popper ponent was rendered on top of the DataGrid ponent like this image below.

Question 1: What should I do to make the Popper ponent rendered on the top of the row but still inside the DataGrid ponent like this image below?

2. The Popper ponent was not sticking to the DataGrid ponent

If I add a few new columns, the Popper ponent was sticking on the end of the row like this image below. This was the condition I want.

If we scroll our mouse to the start of the row, the Popper ponent was not sticking to the end of the row like this image below. This was not the condition I want.

Question 2: What should I do to make the Popper ponent stick to the end of the row regardless of scrolling horizontally our mouse like this image below?

Here is the demo =/Demo2.jsx

Or is there any better way to achieve this case?