fixed dialog visibility across all pages

src/App.js

@@ -34,20 +34,23 @@ export class App extends LitElement {
 
     this.addEventListener('single-fullscreen-image', ({ detail }) => {
       const { src, details } = detail
+
+      const grid = document.createElement('div')
+      grid.classList.add('grid')
+
       const img = new Image()
       img.src = src
-      this.dialogEl.appendChild(img)
-
-      detail.details = 'some details to add to the image to see if this aligns properly'
+      grid.appendChild(img)
 
       if (detail.details) {
         const div = document.createElement('div')
         const p = document.createElement('p')
         p.innerHTML = details
         div.appendChild(p)
-        this.dialogEl.appendChild(div)
+        grid.appendChild(div)
       }
 
+      this.dialogEl.appendChild(grid)
       this.dialogEl.showModal()
 
       this.dialogEl.addEventListener('click', () => {
@@ -62,8 +65,7 @@ export class App extends LitElement {
       ${Router.route.path == '/' ? '' : html`<mm-header title=${Router.route.title}></mm-header>`}
       ${Router.render()}
       ${Router.route.path == '/' ? '' : html`<mm-footer path=${Router.route.path}></mm-footer>`}
-      <dialog class="popup">
-      </dialog>
+      <dialog class="popup"></dialog>
     `
   }
 
@@ -79,22 +81,23 @@ export class App extends LitElement {
       margin: auto;
       border: none;
       outline: none;
-      display: grid;
-      grid-template-rows: minmax(0em, 1fr) auto;
-      max-height: calc(100vmin - 2em);
+      height: 80svh;
 
-      > * {
-        margin-inline: auto;
+      & .grid {
+        display: grid;
+        grid-template-rows: minmax(0em, 1fr) auto;
+        height: 100%;
       }
 
-      & div {
+      & .grid > div {
         padding-block-start: 1em;
         font-size: 1.25em;
       }
 
-      & img {
+      & .grid > img {
         display: block;
         height: 100%;
+        width: 100%;
         object-fit: contain;
       }
     }