Ecommerce Product Page using dialogs

What are you most proud of, and what would you do differently next time?

I liked the use of dialog elements in html.

What challenges did you encounter, and how did you overcome them?

I major issue that I encountered was centering the checkout dialog relative to the shopping cart button that I used as a trigger to open a dialog.

const handleCartButton = (e) => {
    if (large.matches) {
        const rect = cartButton.getBoundingClientRect();
        checkoutDialog.style.position = "absolute";
        checkoutDialog.style.top = `${rect.bottom + window.scrollY}px`;
        checkoutDialog.style.left = `${
            rect.left + rect.width / 2 + window.scrollX
        }px`;
        checkoutDialog.style.transform = "translateX(-50%)";
    }

    if (checkoutDialog.open) {
        checkoutDialog.close();
    } else {
        checkoutDialog.show();
    }
};

I used javascript to adjust the position of the dialog accordingly, however, there might be better ways to achieve this.

What specific areas of your project would you like help with?

Specifically, I'd like any suggestions or help on how to make that checkout dialog better. Generally, any tips on how to create modals would be helpful as well.