I have a table with a kebab icon. When user clicks on that icon a popup(delete form) show's up. Due to which it scrolls the content to left. This behaviour is only observed on ipad and small screens.Whereas On Desktop it works fine.

Here is the observed behaviour . when we click on kebab icon delete dropdown shows up.

when clicked on kebab icon again table scrolls to left and closes the dropdown

Here is snippet below.

There is onClick handler on the icon. onClick handler just sets the id and it just renders/hides the dropdown based on selected id.

             <table style={{overflowY: 'auto'}}>

                  {...table contents...}
                  <iris-icon-only
                    type="more-vertical"
                    size="13"
                    className="dropbtn"
                    style={{ cursor: "pointer" }}
                    onClick={() => setSelectedRowId(id)}
                    data-test="kebabicon"
                  ></iris-icon-only>
                  {selectedRowId == id && (
                    <DropDown
                      data-test="deletedropdown"
                      style={toDeleteFormStatus[selectedStatus].styles}
                      label={InReviewStatus[selectedStatus]}
                    />
                  )}