small fixes

index.html

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
     <link rel="stylesheet" type="text/css" href="css/styles.css">
-    <link rel="stylesheet" type="text/css" href="css/mobile_styles.css">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pako.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
   </head>

js/AboutPanel.js

@@ -28,13 +28,9 @@ export default class AboutPanel extends Panel {
     this.toggleCollapse(false);
   }
 
-  addClickListener(buttonId, callback) {
-    const button = document.getElementById(buttonId);
-    if (button) {
-      button.addEventListener('click', callback.bind(this));
-    } else {
-      console.error(`Button with ID ${buttonId} not found.`);
-    }
+  destroy() {
+    this.removeClickListener('patternHelpButton', this.showHelp);
+    this.removeClickListener('githubLinkButton', this.gotoGithub);
   }
 
   gotoGithub() {

js/Panel.js

@@ -333,5 +333,22 @@ export default class Panel {
     this.panel.style.display = isActive ? '' : 'none';
   }
 
+  addClickListener(buttonId, callback) {
+    const button = document.getElementById(buttonId);
+    if (button) {
+      button.addEventListener('click', callback.bind(this));
+    } else {
+      console.error(`Button with ID ${buttonId} not found.`);
+    }
+  }
+
+  removeClickListener(buttonId, callback) {
+    const button = document.getElementById(buttonId);
+    if (button) {
+      button.removeEventListener('click', callback.bind(this));
+    } else {
+      console.error(`Button with ID ${buttonId} not found for removal.`);
+    }
+  }
 }
 

js/VortexEditor.js

@@ -169,9 +169,12 @@ export default class VortexEditor {
     window.addEventListener('resize', () => {
       const isNowMobile = this.detectMobile();
       if (isNowMobile !== this.isMobile) {
+        // when switching from mobile to non mobile update the layout
         this.isMobile = isNowMobile;
+        this.updateStylesheet(this.isMobile);
+        this.applyLayout();
       }
-      this.applyLayout();
+      // always shift the lightshow to be centered
       this.lightshow.resetToCenter();
     });
   }
@@ -181,6 +184,11 @@ export default class VortexEditor {
     return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) || window.innerWidth < 1200;
   }
 
+  updateStylesheet(isMobile) {
+    const layoutStylesheet = document.getElementById('layoutStylesheet');
+    layoutStylesheet.href = isMobile ? 'css/mobile_styles.css' : 'css/styles.css';
+  }
+
   applyLayout() {
     if (this.isMobile) {
       this.applyMobileLayout();