Material-ui Popover, Select, меню Компоненты позиции неправильно, когда я даю индекс увеличения

Question

Я даю индекс масштабирования для моего html, и после этого компоненты Material-ui Popover, Select и Menus, которые используют компоненты Material-ui Modal, позиции меняются неправильно

Вот мой İndex.css

@media only screen and (max-width: 1500px) {
html{
    zoom:0.8
}}

Мои Js.

               <Popover
                anchorReference="anchorEl"
                open={Boolean(userMenu)}
                anchorEl={userMenu}
                onClose={userMenuClose}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'center'
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'center'
                }}
                action={refa}
                classes={{
                    paper: 'py-8'
                }}
            >
                <>
                    <MenuItem onClick={() => changeLanguage('tr')}>
                        <img src="/assets/images/flags/tr.png" alt="tr" 
                         className="flag mr-8" />
                        <ListItemText className="pl-0 " primary="TR" />
                    </MenuItem>
                    <MenuItem onClick={() => changeLanguage('en')}>
                        <img src="/assets/images/flags/en.png" alt="en" 
                         className="flag mr-8" />
                        <ListItemText className="pl-0" primary="EN" />
                    </MenuItem>
                </>
            </Popover>

Вот что должно быть введите описание изображения здесь

Но это произойдет введите описание изображения здесь