htmlcssdialogheightwidth

Dialog element will not resize to full or whole screen even though width and height are set to 100%

In the middle of writing my project code I decided to change a popup I created myself to a dialog tag. But then I ran into a problem that dialog element didn't spread to the whole screen even though I set 100%/100v for width and height in element style.

As you can see in the examples I attached, in example 2 there is a basic dialog element that is spread over the entire screen, while in example 1 (which is my open source project), there are margins on the right side and the bottom of the screen.

Example 1:

const dialogContent=`
<div class="boxview__container">
  <div class="boxview__control-bar">
    <div class="boxview__controls-buttons boxview__controls-buttons_type_share">
      <div class="share-options-buttons">
        <div>
 
        </div>
        <div>
        
        </div>
        <div>
    
        </div>
      </div>
      <button class="button" id="share-button">
  
      </button>
      <button class="button">
  
      </button>
    </div>
    <div
      class="boxview__controls-buttons boxview__controls-buttons_type_interactive"
    >
      <button class="button">
   
      </button>
      <button class="button">
  
      </button>
      <button
        class="button boxview__zoom-in-button boxview__zoom-button"
        id="zoom-in-button"
      >
  
      </button>
      <button
        class="button boxview__zoom-in-button boxview__zoom-button"
        id="zoom-out-button"
      >
     
      </button>
      <div class="thumbnails-buttons">
        <button
          class="button boxview__thumbnails-button boxview__thumbnails-button_icon-filled"
          id="thumbnails-filled-button"
        >
      
        </button>
        <button
          class="button boxview__thumbnails-button boxview__thumbnails-button_icon-outlined"
          id="thumbnails-outlined-button"
        >
       
        </button>
      </div>

      <button class="button boxview__fullscreen-button" id="fullscreen-button">
  

      </button>
    </div>
    <button class="button boxview__close-button" id="close-button">
 
    </button>
  </div>
  <div class="boxview__navigation-buttons">
    <button
      class="button boxview__navigate-button boxview__navigate-button_before"
      id="nav-previous-button"
    >
   
    </button>
    <button
      class="button boxview__navigate-button boxview__navigate-button_next"
      id="nav-next-button"
    >
  
    </button>
  </div>
  <div class="boxview__content" data-element="boxview-content">
    <div class="boxview__media"></div>
    <div class="boxview__thumbnails-track"></div>
  </div>
</div>
`,allMediaList=document.querySelectorAll("[data-boxview-list]");let mediaList;for(let ml=0;ml<allMediaList.length;ml++){mediaList=[...allMediaList[ml].children];for(let e=0;e<mediaList.length;e++){let t=mediaList[e];if(t.setAttribute("data-boxview-item",""),"video"===t.localName){let i=t.parentElement,o=document.createElement("div"),n=document.createElement("button");o.classList.add("boxview-video-wrapper"),n.classList.add("boxview-open-popup-button"),n.setAttribute("data-boxview","video-button"),t.removeAttribute("controls");let l=()=>{n.classList.toggle("boxview-open-popup-button_hidden")};t.addEventListener("mouseenter",displayControlsOnMediaItem),t.addEventListener("mouseout",unDisplayControlsOnMediaItem),o.addEventListener("mouseenter",displayControlsOnWrapper),o.addEventListener("mouseout",unDisplayControlsOnWrapper),t.addEventListener("play",l),t.addEventListener("pause",l);let a=t.offsetWidth;o.style.width=`${a}px`,t.style.width="100%",t.style.height="100%",i.replaceChild(o,t),o.appendChild(t),o.appendChild(n)}if("iframe"===t.localName){let r=t.parentElement,s=document.createElement("div"),d=document.createElement("button");s.classList.add("boxview-iframe-wrapper"),d.classList.add("boxview-open-popup-button"),d.setAttribute("data-boxview","video-button");let c=t.offsetWidth;s.style.width=`${c}px`,t.style.width="100%",t.style.height="100%",r.replaceChild(s,t),s.appendChild(t),s.appendChild(d)}}}const mediaItems=[...document.querySelectorAll("[data-boxview-item]")],boxviewPopover=document.createElement("dialog");boxviewPopover.classList.add("boxview"),boxviewPopover.innerHTML=dialogContent,document.body.appendChild(boxviewPopover);const boxviewContent=boxviewPopover.querySelector('[data-element="boxview-content"]'),nextButton=document.getElementById("nav-next-button"),previousButton=document.getElementById("nav-previous-button"),shareButton=document.getElementById("share-button"),shareOptionsButtons=boxviewPopover.querySelector(".share-options-buttons"),zoomInButton=document.getElementById("zoom-in-button"),zoomOutButton=document.getElementById("zoom-out-button"),closeButton=document.getElementById("close-button"),fullscreenButton=document.getElementById("fullscreen-button"),fullscreenEntryIcon=document.getElementById("fullscreen-entry-icon"),fullscreenExitIcon=document.getElementById("fullscreen-exit-icon"),thumbnailsShowButton=document.getElementById("thumbnails-outlined-button"),thumbnailsHideButton=document.getElementById("thumbnails-filled-button");thumbnailsShowButton.classList.add("boxview__thumbnails-button_active");const thumbnailsTrackHeight="72px",boxviewMediaWrapper=boxviewPopover.querySelector(".boxview__media"),boxviewThumbnailsTrack=boxviewPopover.querySelector(".boxview__thumbnails-track");let boxviewActiveMedia;const createMediaElement=e=>{(boxviewActiveMedia=document.createElement(`${e}`)).classList.add(`boxview__${e}`)},removeBoxviewMediaWrapperChildren=()=>{let e=[...boxviewMediaWrapper.children];e.forEach(e=>{e.classList.contains("button")||e.remove()})},createImageElement=function(e){0!==boxviewMediaWrapper.children.length&&removeBoxviewMediaWrapperChildren(),createMediaElement("img"),boxviewActiveMedia.setAttribute("src",e),boxviewMediaWrapper.appendChild(boxviewActiveMedia)},createVideoElement=e=>{0!==boxviewMediaWrapper.children.length&&removeBoxviewMediaWrapperChildren(),createMediaElement("video");let t=document.createElement("source");t.setAttribute("src",e),boxviewActiveMedia.setAttribute("controls",""),boxviewActiveMedia.appendChild(t),boxviewMediaWrapper.appendChild(boxviewActiveMedia),boxviewActiveMedia.load(),hideZoomButtons()},createIframeElement=e=>{0!==boxviewMediaWrapper.children.length&&removeBoxviewMediaWrapperChildren(),createMediaElement("iframe"),boxviewActiveMedia.setAttribute("src",e),boxviewMediaWrapper.appendChild(boxviewActiveMedia)};document.addEventListener("mouseup",e=>{if(e.target===boxviewPopover){let t=[...boxviewMediaWrapper.children];boxviewPopover.close(),t.forEach(e=>{e.classList.contains("button")||e.remove()}),removeAllChildNodes(boxviewThumbnailsTrack),boxviewActiveMedia=""}}),document.addEventListener("keydown",e=>{if("Escape"===e.key){let t=[...boxviewMediaWrapper.children];t.forEach(e=>{e.classList.contains("button")||e.remove()}),removeAllChildNodes(boxviewThumbnailsTrack),boxviewActiveMedia=""}});const removeAllChildNodes=function(e){for(;e.firstChild;)e.removeChild(e.firstChild)},handleCloseButton=()=>{boxviewPopover.close(),document.fullscreenElement&&document.exitFullscreen();let e=[...boxviewMediaWrapper.children];e.forEach(e=>{e.classList.contains("button")||e.remove()}),removeAllChildNodes(boxviewThumbnailsTrack),boxviewActiveMedia=""};closeButton.addEventListener("click",()=>{handleCloseButton()});const getBoxviewActiveMediaUrl=()=>"iframe"===boxviewActiveMedia.localName?boxviewActiveMedia.src:boxviewActiveMedia.currentSrc,toggleThumbnailsMode=()=>{let e=boxviewContent.style.getPropertyValue("--thumbnails-track-height");thumbnailsShowButton.classList.toggle("boxview__thumbnails-button_active"),thumbnailsHideButton.classList.toggle("boxview__thumbnails-button_active"),e===thumbnailsTrackHeight?boxviewContent.style.setProperty("--thumbnails-track-height","0px"):boxviewContent.style.setProperty("--thumbnails-track-height",thumbnailsTrackHeight)};let thumbnailElement;const createThumbnail=()=>{(thumbnailElement=document.createElement("img")).classList.add("boxview__thumbnail"),boxviewThumbnailsTrack.appendChild(thumbnailElement)};let mediaElementType;const checkChildMediaElement=(e,t)=>{let i=[...e.children],o=i.find(e=>t.includes(e.localName));if(null!==o)mediaElementType=o.localName;else throw unauthorizedError.message="Element must contain an image, video or iframe",unauthorizedError},checkElementsTypes=(e,t,i)=>{for(let o=0;o<e.length;o++){let n=e[o];t.includes(n.localName)&&(mediaElementType=n.localName),"div"===n.localName&&checkChildMediaElement(n,t),i.includes(mediaElementType)||i.push(mediaElementType)}},checkMediaElementsTypes=e=>{let t=[],i=["img","video","iframe"];return checkElementsTypes(e,i,t),t},getInitialMediaSrc=(e,t)=>{let i;return"img"===t?createImageElement(i=e.currentSrc):"video"===t?createVideoElement(i=e.currentSrc):"iframe"===t?createIframeElement(i=e.src):void 0};function getInitialMedia(e,t){1===e.length&&(e.includes("img")&&getInitialMediaSrc(t,"img"),e.includes("iframe")&&getInitialMediaSrc(t,"iframe"),e.includes("video")&&getInitialMediaSrc(t,"video")),1!==e.length&&("iframe"!==t.localName?t.currentSrc:t.src,getInitialMediaSrc(t,t.localName))}const getElementTarget=e=>{if(e.target.classList.contains("boxview-open-popup-button")){if(e.target.parentElement.querySelector("video")){let t=e.target.parentElement.querySelector("video");return t}if(e.target.parentElement.querySelector("iframe")){let i=e.target.parentElement.querySelector("iframe");return i}}else{let o=e.target;return o}},openBoxview=e=>{let t=getElementTarget(e),i=[...t.closest(".media-content").children],o=[],n=()=>{for(let e=0;e<i.length;e++){let t=i[e],n;n=t.classList.contains("boxview-video-wrapper")?t.querySelector("video"):t.classList.contains("boxview-iframe-wrapper")?t.querySelector("iframe"):t,o.push(n)}return o};n();let l=checkMediaElementsTypes(o);getInitialMedia(l,t),boxviewPopover.showModal()},openBoxviewPopover=()=>{for(let e=0;e<mediaItems.length;e++){let t=mediaItems[e];if("video"!==t.localName&&(t.style.cursor="pointer",t.addEventListener("click",openBoxview)),"video"===t.localName||"iframe"===t.localName){let i=t.parentElement.querySelector(".boxview-open-popup-button");i.addEventListener("click",openBoxview)}}};openBoxviewPopover();
:root {
  --icon-color: rgb(140, 140, 140);
  --icon-color-hover: rgb(220, 220, 220);
  --icon-color-disable: rgb(60, 60, 60);
  --icon-transition: linear 0.2s;
  --media-transition: linear 0.2s;
}

*,
*::before,
*::after {
  outline: solid 2px red;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.button {
  background: none;
  border: none;
  cursor: pointer;
}

.button_disable {
  cursor: default;
}

.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.media-content {
  display: flex;
  flex-wrap: wrap;
}


/* .media-content > video {
  position: relative;
}

.media-content > video::after {
  content: '\e038';
  font-family: "Material Icons";
  position: relative;
  top: 0;
  left: 0;
  font-weight: 400;
  line-height: 1;
  z-index: 100;
  color: black;
  font-size: 130px;
  
} */

.media-content__image,
.media-content__video {
  width: 400px;
  display: inline-block;
}

.media-content__youtube {
  width: 400px;
  aspect-ratio: 16/9;
}

.popup-button {
  width: 150px;
  padding: 1rem 2rem;
  border: black 3px solid;
}

.html-video {
  width: 500px;
  aspect-ratio: 16/9;
}

.youtube-video {
  display: block;
  width: 500px;
  aspect-ratio: 16/9;
}


/* dialog elm */

.boxview {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  --boxview-padding: 10px;
  width: 100%;
  height: 100%;
  /* margin-inline: var(--boxview-padding);
  margin-block-end: var(--boxview-padding); */
  border: none;
  background-color: rgba(0, 0, 0, 0.97);
}


/* :modal {
  position: fixed;
  inset-block-start: 0px;
  inset-block-end: 0px;
  max-width: calc((100% - 6px) - 2em);
  max-height: calc((100% - 6px) - 2em);
  user-select: text;
  visibility: visible;
  overflow: auto;
} */

.boxview::backdrop {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.97);
}

.boxview>* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.boxview__container {
  width: 100%;
  height: 100%;
  --content-height: 100%;
  --boxview-control-bar-height: 60px;
  /* option =  media preview adjustment */
  --thumbnails-track-height: 0;
}

.boxview__control-bar {
  /* position: sticky;
  position: -webkit-sticky;
  inset-block-start: 0;
  inset-inline-start: 0; */
  height: var(--boxview-control-bar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 25px;
  width: 100%;
  padding-inline: 15px;
}

.boxview-video-wrapper,
.boxview-iframe-wrapper {
  display: inline-block;
  position: relative;
}

.boxview-video-play-button {
  width: 52px;
  height: 52px;
  position: absolute;
  content: '';
  top: 50%;
  right: 51%;
  transform: translateY(-50%);
  background: url(./play_circle_black_24dp.svg) no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
  /* background-size: calc(50px + 10%); */
  z-index: 1;
}

.boxview-open-popup-button {
  display: none;
  visibility: hidden;
}

.boxview-video-wrapper:hover .boxview-open-popup-button {
  display: inline-block;
  visibility: visible;
  width: 52px;
  height: 52px;
  position: absolute;
  content: '';
  top: 20px;
  right: 20px;
  background: url(./launch_black_48dp.svg) no-repeat;
  background-color: #00000050;
  border: none;
  cursor: pointer;
  background-position: center;
  /* background-size: calc(50px + 10%); */
  z-index: 1;
  transition: all ease 0.2s;
}

.boxview-iframe-wrapper:hover .boxview-open-popup-button {
  display: inline-block;
  visibility: visible;
  width: 52px;
  height: 52px;
  position: absolute;
  content: '';
  top: 20px;
  right: 20px;
  background: url(./launch_black_48dp.svg) no-repeat;
  background-color: #00000050;
  border: none;
  cursor: pointer;
  background-position: center;
  /* background-size: calc(50px + 10%); */
  z-index: 1;
  transition: all ease 0.2s;
}

.boxview-video-play-button_hidden,
.boxview-open-popup-button_hidden {
  visibility: hidden;
  opacity: 0;
}

.boxview__content {
  /* option = aspect-ratio */
  --media-preview-aspect-ratio: 16/9;
  --media-preview-width: calc( var(--thumbnails-track-height) * var(--media-preview-aspect-ratio));
  height: calc(var(--content-height) - var(--boxview-control-bar-height));
  display: flex;
  flex-flow: column;
  align-items: center;
}

.boxview__media {
  --media-margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--content-height) - var(--thumbnails-track-height));
  margin-block-end: var(--media-margin);
  overflow: hidden;
  /* option = border-radius */
  --border-radius: 12px;
  border-radius: var(--border-radius);
  border: solid 1px red;
}

.boxview__img,
.boxview__video,
.boxview__iframe {
  border: solid 1px white;
  border-radius: var(--border-radius);
  transition: var(--media-transition);
}

.boxview__img:focus,
.boxview__video:focus,
.boxview__iframe:focus {
  border: solid 6px white;
}

.boxview__img,
.boxview__video {
  max-height: 100%;
  max-width: 100%;
}


/* Iframe does not accept % value */

.boxview__iframe {
  height: calc( 100vh - var(--thumbnails-track-height) - var(--boxview-control-bar-height) - var(--boxview-padding) * 2 - var(--media-margin));
  aspect-ratio: 16/9;
}

.boxview__thumbnails-track {
  display: none;
  max-width: 100%;
  height: calc(var(--thumbnails-track-height) + 12px);
  display: grid;
  grid-auto-flow: column;
  gap: 6px;
  grid-auto-columns: var(--media-preview-width);
  scroll-behavior: smooth;
  overflow-y: hidden;
  overflow-x: auto;
  overscroll-behavior: contain;
}

.boxview__thumbnails-track_active {
  display: block;
}

.boxview__thumbnails-track>* {
  width: var(--media-preview-width);
  height: calc(var(--thumbnails-track-height));
}

.boxview__thumbnail {
  /* option = border-radius */
  border-radius: 4px;
  transition: all linear 0.2s;
}

.boxview__thumbnail:hover {
  border: solid 2px;
  /* option = border-color */
  border-color: white;
}


/* Scrollbars */


/* Boxview thumbnails scrollbar */

body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}


/* Boxview thumbnails scrollbar */

.boxview__thumbnails-track::-webkit-scrollbar {
  display: none;
  width: 8px;
  height: 8px;
}

.boxview__thumbnails-track:hover::-webkit-scrollbar {
  display: block;
}

.boxview__thumbnails-track::-webkit-scrollbar-track {
  background-color: rgb(40, 40, 40);
  border-radius: 100vw;
}

.boxview__thumbnails-track::-webkit-scrollbar-thumb {
  background-color: var(--icon-color);
  border: 2px solid rgb(40, 40, 40);
  border-radius: 100vw;
}

.boxview__thumbnails-track::-webkit-scrollbar-thumb:hover {
  background-color: var(--icon-color-hover);
}


/* .boxview__content::-webkit-scrollbar-track {
  background: hsl(120 75% 50% / 1);
  border-radius: 100vw;
  margin-block: 0.5em;
}

.boxview__content::-webkit-scrollbar-thumb {
  background: hsl(120 100% 20% / 1);
  border: 0.25em solid hsl(120 75% 50% / 1);
  border-radius: 100vw;
}

.boxview__content::-webkit-scrollbar-thumb:hover {
  background: hsl(120 100% 10% / 1);
} */


/* Controls */

.svg-icon {
  fill: var(--icon-color);
  transition: all var(--icon-transition);
}

.svg-icon_disable {
  fill: var(--icon-color-disable);
}

.svg-icon:hover {
  fill: var(--icon-color-hover);
}

.boxview__controls-buttons {
  width: 100%;
  display: flex;
  column-gap: 25px;
}


/* Fullscreen */

.boxview__fullscreen-button {
  position: relative;
}

.fullscreen-icon {
  position: absolute;
  inset-block-start: 0;
  inset-block-start: 0;
}

.fullscreen-entry-icon {
  visibility: visible;
  opacity: 1;
}

.fullscreen-exit-icon {
  visibility: hidden;
  opacity: 0;
}


/* Share */

.share-options-buttons {
  visibility: hidden;
  position: absolute;
  inset-inline-start: 60px;
  width: max-content;
  height: max-content;
  display: flex;
  gap: 15px;
  background: rgba(0, 0, 0, 1);
  border-radius: 5px;
  transition: visibility linear 0.2s;
}

.share-options-buttons_active {
  visibility: visible;
}

.boxview__controls-buttons_type_share {
  margin-inline-end: auto;
}

.boxview__controls-buttons_type_interactive {
  display: flex;
  justify-content: center;
}


/* Close */

.boxview__close-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


/* Zoom */

.boxview__zoom-button {
  display: none;
}

.boxview__zoom-button_visible {
  display: inline-block;
}


/* Thumbnails */

.thumbnails-buttons {
  position: relative;
  width: 32px;
  height: 32px;
}

.boxview__thumbnails-button {
  position: absolute;
  width: 32px;
  height: 32px;
}

.thumbnails-icon {
  rotate: 90deg;
}

.boxview__thumbnails-button_icon-filled,
.boxview__thumbnails-button_icon-outlined {
  visibility: hidden;
  opacity: 0;
}

.boxview__thumbnails-button_active {
  visibility: visible;
  opacity: 1;
}


/* Navigate */

.boxview__navigation-buttons {
  position: relative;
}

.boxview__navigate-button {
  position: fixed;
  --navigate-button-width: 50px;
  width: var(--navigate-button-width);
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
  z-index: 1;
}

.boxview__navigate-button_before {
  inset-inline-start: 0px;
}

.boxview__navigate-button_next {
  inset-inline-start: calc(100% - var(--navigate-button-width));
}

*/ .svg-icon_nav {
  fill: rgb(180, 180, 180);
  transition: transform var(--icon-transition);
}

.boxview__navigate-button:hover .svg-icon_nav {
  transform: scale(1.2);
  fill: var(--icon-color-hover);
}
<body class="body">
  <div class="media-content" data-boxview-list>
    <img class="media-content__image" data-boxview="image" src="https://cdn3.photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://images.unsplash.com/photo-1662241131527-f57cadcacf32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://images.unsplash.com/photo-1661565883779-774d498a3a96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://images.unsplash.com/photo-1661345741272-17a0b691b6da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://cdn3.photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://images.unsplash.com/photo-1662241131527-f57cadcacf32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://images.unsplash.com/photo-1661565883779-774d498a3a96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://images.unsplash.com/photo-1661345741272-17a0b691b6da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://cdn3.photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://images.unsplash.com/photo-1662241131527-f57cadcacf32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://images.unsplash.com/photo-1661565883779-774d498a3a96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
    <img class="media-content__image" data-boxview="image" src="https://images.unsplash.com/photo-1661345741272-17a0b691b6da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" alt="" />
  </div>
</body>

Example 2:

const dialog = document.getElementById('dialog');

dialog.showModal();
.boxview {
    width: 100%;
    height: 100%;
    border: solid red 3px;
    background-color: rgba(0, 0, 0, 0.97);
  }
  
  .boxview::backdrop {
    background-color: rgba(0, 0, 0, 0.97);
  }

  
  .boxview__container {
    width: 100%;
    height: 100%;
  }
<dialog class="boxview" id="dialog">
      <div class="boxview__container">
        
      </div>
    </dialog>

I tried a lot of deletions and changes to find the source of the error but I couldn't.

p.s: I marked all the elements with a red outline border to focus the error.

Thanks!

Solution

  • Problem

    I suspect this is a clash with the webbrowsers default/build-in stylesheet.

    For example, for me on Firefox the following property is in effect:

    dialog:modal {
  max-width: calc(100% - 6px - 2em);
}

    I suspect other webbrowsers (chromium, webkit, ...) will have similar defaults.

    Fix

    If you override that property, for example with:

    dialog:modal {
  max-width: 100vw;
}

    The issue no longer appears.