Почему раскладка основного контента меняется при открытии модального окна?

Посмотрите на этот код React для создания модального окна:

import * as React from "react";
import "./styles.css";

function Modal({ handleClose }) {
  return (
    <div onClick={handleClose}>
      <dialog>
        <header>
          <button onClick={handleClose}>X</button>
          <h2>Модальное окно</h2>
        </header>
        <section>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi
            tincidunt ornare massa. Morbi enim nunc faucibus a pellentesque sit
            amet. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi
            nullam. Eget dolor morbi non arcu risus. Integer eget aliquet nibh
            praesent tristique magna sit amet purus. Nullam vehicula ipsum a arcu.
            Vitae proin sagittis nisl rhoncus mattis rhoncus. Risus feugiat in ante
            metus dictum at tempor.
          </p>
        </section>
      </dialog>
    </div>
  );
}

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <div className="container">
      {/* Модальное окно */}
      {isOpen && <Modal handleClose={() => setIsOpen(false)} />}

      {/* Основное содержимое */}
      <main>
        <header>
          <h1>Тестовое модальное окно</h1>
        </header>
        {["red", "blue", "green", "pink", "purple", "yellow"].map(
          (color, index) => {
            return (
              <section
                key={index}
                style={{
                  backgroundColor: color,
                  width: "100%",
                  height: "50vh",
                }}
              />
            );
          }
        )}
        <button className="primary" onClick={() => setIsOpen(true)}>
          открыть модальное окно
        </button>
      </main>
    </div>
  );
}

styles.css

html {
  background-color: black;
  color: white;
}

.container {
  margin: 0 auto;
  max-width: 1100px;
  padding: 50px;
  position: relative;
}

main {
  margin: auto;
  padding: 24px;
}

main > header {
  position: sticky;
  top: 0;
  background: black;
  text-align: center;
  padding: 24px;
}

dialog {
  position: fixed;
  display: grid;
  grid-template-rows: auto 1fr;
  top: 40px;
  background: transparent;
  width: 75vw;
  margin: auto;
  animation: expand 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  border-radius: 8px;
  padding: 32px;
  z-index: 10;
  color: white;
}

dialog section {
  max-height: calc(90vh - 120px);
  overflow: auto;
}

dialog button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

div:has(dialog) {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  /* width: 100%; */
  /* height: 100%; */
  z-index: 9;

  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
}

.primary {
  position: fixed;
  bottom: 40px;
  right: 40px;
}

Вы можете запустить полный код здесь.

У меня есть несколько вопросов:

1. Почему <main> сжимается, и содержимое возвращается вверх, когда я открываю модальное окно?
2. Почему я не могу прокручивать содержимое в main, когда модальное окно открыто?

Я работал над этим всю ночь, чтобы найти решения.

Если я сделаю модальное окно проще, например так:

<div
  style={{
    backgroundColor: "rgba(0,0,0,0.5)",
    zIndex: 9999,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    inset: 0,
    position: "fixed",
  }}
  onClick={handleClose}
>
  <div style={{ backgroundColor: "white", padding: "30px" }}>
    <h2 style={{ color: "black" }}>некоторый заголовок...</h2>
    <p style={{ color: "black" }}>некоторое содержимое</p>
  </div>
</div>;

Тогда всё в порядке.

Ошибка, похоже, связана с CSS.

Я хочу понять, что стало причиной ошибки и как ее исправить, если модальное окно будет таким сложным.