Как расположить элемент HTML-диалога внизу страницы на всю ширину?

к диалогу применяется значение по умолчанию max-width.

document.addEventListener("DOMContentLoaded", function () {
    const btn = document.querySelector("#btn");
  const dia = document.querySelector("#dia");
  
    btn.addEventListener("click", function() {
    dia.showModal();
  });
  dia.addEventListener("click", function (e) {
    if (e.target === dia) {
        dia.close();
    }
  });
});

#dia {
  padding: 0;
  border: 0;
  margin: auto 0 0 0;
  width: 100%;
  max-width: 100%; /* add this */
}

<dialog id = "dia">
  <p>hello world!</p>
</dialog>

<button id = "btn">
  toggle
</button>

Некоторые браузеры автоматически добавляют стили к диалогам, как вы можете видеть на скриншоте,

Вам следует перезаписать максимальную ширину и сделать ее максимальной шириной: 100%; это должно сработать!

1. Удалите это свойство согласно вашему коду

   заполнение: 0;

До :

#dia {
  padding: 0;
  border: 0;
  margin: auto 0 0 0;
  width: 100%;
}

После :

#dia {
  border: 0;
  margin: auto 0 0 0;
  width: 100%;
}

2. Добавьте максимальную ширину:

 #dia {
         padding: 0;
         border: 0;
         margin: auto 0 0 0;
         width: 100%;
         max-width: 100%
       }