Make dialog css edits dependant on polyfil

public/lib/dialog-polyfill.css

@@ -1,4 +1,4 @@
-dialog {
+.poly_dialog {
   position: absolute;
   left: 0; right: 0;
   width: -moz-fit-content;
@@ -15,22 +15,22 @@ dialog {
   display: block;
 }
 
-dialog:not([open]) {
+.poly_dialog:not([open]) {
   display: none;
 }
 
-dialog + .backdrop {
+.poly_dialog + .backdrop {
   position: fixed;
   top: 0; right: 0; bottom: 0; left: 0;
   background: rgba(0,0,0,0.1);
 }
 
-._dialog_overlay {
+._poly_dialog_overlay {
   position: fixed;
   top: 0; right: 0; bottom: 0; left: 0;
 }
 
-dialog.fixed {
+.poly_dialog.fixed {
   position: fixed;
   top: 50%;
   transform: translate(0, -50%);

public/lib/dialog-polyfill.esm.js

@@ -562,7 +562,7 @@ dialogPolyfill.DialogManager = function() {
   // actual implementation, the modal dialog stacking is controlled by the
   // top layer, where z-index has no effect.
   this.overlay = document.createElement('div');
-  this.overlay.className = '_dialog_overlay';
+  this.overlay.className = '_poly_dialog_overlay';
   this.overlay.addEventListener('click', function(e) {
     this.forwardTab_ = undefined;
     e.stopPropagation();

public/scripts/popup.js

@@ -179,7 +179,10 @@ export class Popup {
         const template = document.querySelector('#popup_template');
         // @ts-ignore
         this.dlg = template.content.cloneNode(true).querySelector('.popup');
-        dialogPolyfill.registerDialog(this.dlg);
+        if (!this.dlg.showModal) {
+            this.dlg.classList.add("poly_dialog");
+            dialogPolyfill.registerDialog(this.dlg);
+        }
         this.body = this.dlg.querySelector('.popup-body');
         this.content = this.dlg.querySelector('.popup-content');
         this.mainInput = this.dlg.querySelector('.popup-input');