fix: Settings panel overflows screen on certain sizes #90

src/seqta/ui/SettingsResizer.ts

@@ -0,0 +1,26 @@
+import { debounce } from "../utils/debounce";
+
+/**
+ * Automatically resizes the popup to fit the screen, checks on resize but is debounced to prevent intense utilisation.
+ */
+export class SettingsResizer {
+  constructor() {
+    this.adjustPopupHeight();
+    window.addEventListener('resize', debounce(this.adjustPopupHeight, 250) as EventListener);
+    document.addEventListener('DOMContentLoaded', this.adjustPopupHeight);
+  }
+
+  private adjustPopupHeight() {
+    const iframePopup = document.getElementById('ExtensionPopup');
+    if (!iframePopup) return;
+
+    const viewportHeight = window.innerHeight;
+    const idealHeight = viewportHeight - 80 - 15; // -80px for the top of the popup
+
+    if (idealHeight > 600) {
+      iframePopup.style.height = '600px';
+    } else {
+      iframePopup.style.height = `${idealHeight}px`;
+    }
+  }
+}